动态更改HTML文本会破坏jquery脚本

Question

我的网站上有一部分HTML，当用户做出选择时，HTML文本的各个方面都会发生变化。

含义 - 当用户选中复选框时，指定div内的某些文字会被修改。

但是，每当修改HTML时，我都无法执行脚本。此DIV中的相关ID和classess保持不变，其他未触及的HTML将触发脚本。在编程修改HTML之后，HTML的含义是什么，使它不会触发脚本？

我所指的代码是：

<input type='checkbox' id='switch'>Switch text
<div id="example">
    <input type='checkbox' class='trigger' id='box1'>Text Text AAA
    <input type='checkbox' class='trigger' id='box2'>Text Text AAA
    <input type='checkbox' class='trigger' id='box3'>Text Text AAA</div>

JS

$('#switch').change(function () {
    if ($('#switch').is(':checked')) {
        var str = $('#example').html().replace(/AAA/g, 'Hello');
        $('#example').html(str);
    }
});

$('.trigger').change(function () {
    if ($(this).is(':checked')) {
        alert('It worked');
    }
});

小提琴：http://jsfiddle.net/L82r45ob/

Answer 1

使用html方法替换HTML时：

var str = $('#example').html().replace(/AAA/g, 'Hello');
$('#example').html(str);

删除所有绑定事件处理程序。因此这个问题。

改为使用事件委派：

$('#example').on('change', '.trigger', function () {
    if ($(this).is(':checked')) {
        alert('It worked');
    }
});

在这种情况下，您将事件附加到永远不会更改的#example div，因此您可以从事件冒泡DOM树中受益。

演示：http://jsfiddle.net/L82r45ob/1/