解决Bootstrap-switch对话框问题：动态生成与事件绑定

本文主要介绍了如何在Bootstrap框架中使用bootstrap-switch组件创建一个可交互的开关按钮，并解决在dialog页面中点击不触发事件的问题。首先，我们来看如何在HTML中实现基本的开关控件： HTML部分： ```html <input id="create-switch" type="checkbox" checked="" /> ``` 这段代码创建了一个初始状态为选中的checkbox，通过`bootstrap-switch`插件将其转换为美观的开关样式。 在JavaScript部分，作者对动态生成的开关进行了操作： 1. 动态添加和初始化switch： ```javascript $('#create-switch').wrap('<div class="switch"/>').parent().bootstrapSwitch(); ``` 这里使用`.wrap()`方法将checkbox包装在`<div class="switch">`中，并调用`bootstrapSwitch()`方法使其具备开关效果。 2. 控制开关文本和状态： ```javascript var switchLeft = document.getElementsByClassName("switch-left"); switchLeft[0].innerText = "启用"; var switchRight = document.getElementsByClassName("switch-right"); switchRight[0].innerText = "禁用"; ``` 根据开关的状态（`agency.status`），更改切换按钮的文字标签。 3. 响应开关状态变化： ```javascript if (agency.status == 1) { parent[0].className = 'switch-animateswitch-on'; } else { parent[0].className = 'switch-animateswitch-off'; } ``` 根据`agency.status`的值，为开关添加相应的动画效果。 4. 与后端通信： 当开关状态改变时，通过AJAX发送状态值（1表示启用，0表示禁用）： ```javascript var status = 0; if ($('#create-switch').parent().hasClass("switch-on")) { status = 1; } // 发送AJAX请求，更新后端数据 // ... ``` 最后，文章还提到了一个关键问题，即在动态生成的开关按钮中，为了防止在dialog页面中误触提交（通常由Enter键触发），作者添加了禁用Enter键的事件处理函数： ```javascript document.onkeydown = function(e) { var ev = (typeof event != 'undefined') ? window.event : e; if (ev.keyCode == 13) { return false; } }; ``` 这个函数会在用户按下Enter键时返回`false`，阻止默认的行为发生。 本文重点在于如何在Bootstrap中正确使用bootstrap-switch组件，以及如何处理动态生成的开关在特定场景下的交互问题，包括状态控制、动画效果和键盘事件的管理。