javascript - Jquery 不将事件绑定(bind)到 ajax 添加的 dom

Question

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

$.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(''));
}

我还有一个应该在复选框值更改时触发的事件绑定(bind)器:

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

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

我能做些什么来及时绑定(bind)吗？

和平!

Answer 1

这是因为绑定(bind)处理程序时该元素不存在。

试试这个:

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

或者，如果您使用的是旧版本的 jQuery(低于 1.7)...

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