动态加载数据后jQuery Bootstrap Toggle失效问题求助

嘿，我之前也碰到过完全一样的状况！静态页面里Toggle好好的，一用Ajax加载新表格就罢工，折腾了好一会儿才搞明白问题所在，给你分享下解决方案：

问题根源 #

1. 事件绑定失效：你一开始用的$('[data-toggle="toggle"]').change()是直接绑定到初始化时就存在的DOM元素上的，而Ajax动态生成的元素是后来才插入页面的，这些新元素根本没绑定到这个change事件上。
2. 未重新初始化Toggle：动态生成的Toggle控件需要在DOM插入完成后，手动调用Bootstrap Toggle的初始化方法，光靠页面加载时的自动初始化是没用的。

修正后的完整代码 #

$(document).ready(function() {
    // 改用事件委托，绑定到最稳定的父级（或者document），确保动态生成的元素也能触发事件
    $(document).on('change', '[data-toggle="toggle"]', function(){
        $(this).parents().next('.hide').toggle();
    });

    $("#ViewSegments").submit(function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 示例Ajax请求（根据你的实际业务调整参数）
        $.ajax({
            url: '你的请求接口地址',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                // 将返回的动态表格HTML插入到页面指定容器
                $('#targetTableContainer').html(response);
                
                // 关键步骤：对新插入的Toggle控件重新初始化
                $('[data-toggle="toggle"]').bootstrapToggle('destroy'); // 先销毁可能存在的旧实例避免冲突
                $('[data-toggle="toggle"]').bootstrapToggle(); // 重新初始化Toggle
            },
            error: function(xhr, status, error) {
                console.error('Ajax请求出错:', error);
            }
        });
    });
});

额外检查点 #

• 确保Ajax返回的HTML代码中，Toggle按钮正确带有data-toggle="toggle"属性，以及必要的Bootstrap Toggle配置属性（比如data-on、data-off等）。
• 检查页面有没有重复引入bootstrap-toggle.min.js，重复引入很容易导致控件初始化异常。
• 确认初始化代码是在动态HTML插入到DOM之后执行的，放在Ajax的success回调里是最稳妥的时机。

内容的提问来源于stack exchange，提问作者neel