javascript - Jquery 不会将事件绑定到 ajax 添加的 dom

Question

我有一个 ajax 函数，可以加载 4 个复选框的内容，如下所示：

$.ajax({
url : some url..,
dataType : 'json',
success : function(data) {
    buildCheckboxes(data);
    },
error : function(data) {
            do something...
    }
});

构建复选框方法执行以下操作：

function updateNotificationMethods(items) {
    var html = [];
    $.each(items, function(i, item) {
        htmlBuilder = [];
        htmlBuilder.push("<input type='checkbox' class='checkbox-class' name='somename' value='");
        htmlBuilder.push(item.id);
        htmlBuilder.push("'");
        htmlBuilder.push("/>&nbsp;");
        htmlBuilder.push(item.name);
        htmlBuilder.push("<br/><br/>")
        html.push(htmlBuilder.join(''));
    });
    $("#div").html(html.join(''));
}

我还有一个事件绑定器，应该在复选框值更改时触发：

$(".checkbox-class").change(function() {
alert("change");
 });

如果我在源代码中有复选框 html（即静态），而不是我在这里的设置，它可以工作，我从服务器动态加载数据。

我能做些什么来及时进行绑定吗？

和平！

Answer 1

这是因为当您绑定处理程序时该元素不存在。

试试这个：

$( document ).on( 'change', '.checkbox-class', function() {
    alert("change");
});

或者，如果您使用的是旧版本的 jQuery（小于 1.7）...

$( '.checkbox-class' ).live( function() {
    alert("change");
});

Answer 2

绑定事件时复选框不可用。 jsfiddle

假设在绑定事件时存在 id 为 div 的元素。

$("#div").on("change",".checkbox-class",function() {
     alert("change");
 });

Answer 3

这段代码：

$(".checkbox-class").change(function() {
alert("change");
});

不要建立一个连续的和持续的规则，相反，这段代码将一个事件管理器（在本例中是更改事件）附加到执行时存在的每个匹配的 DOM 对象。
如果您愿意，可以在每次将复选框添加到 DOM 时重新执行此代码（或类似且窄的代码）。