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

我有一个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(''));
}

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

我能做些什么以便及时进行绑定

---

和平

绑定事件时，复选框不可用

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

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

---

绑定事件时，复选框不可用

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

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

---

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

试试这个：

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

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

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

---

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

试试这个：

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

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

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

此代码：

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

不要建立一个连续的、持续的规则，相反，在本例中，此代码将事件管理器附加到更改事件，并将其附加到执行时存在的每个匹配DOM对象。 如果需要，可以在每次向DOM添加复选框时重新执行此代码或类似代码并缩小范围。

此代码：

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

不要建立一个连续的、持续的规则，相反，在本例中，此代码将事件管理器附加到更改事件，并将其附加到执行时存在的每个匹配DOM对象。

---

---

如果需要，您可以在每次向DOM添加复选框时重新执行此代码或类似代码，并缩小范围。

否。它将是$'.checkbox.的父项。在'change'上，'.checkblox类'，函数@凯文布彻：不。在调用时只绑定到现有的checkbox类元素；任何使用该类动态创建的元素都不会有对更改事件的回调。@KevinBoucher你在说什么？不，也不可能。这只能是授权方式，这正是Shmidty所说的。Sushil的答案与jQuery文档中的普通bind没有什么不同：事件处理程序只绑定到当前选定的元素；在代码调用.on时，它们必须存在于页面上。@KevinBoucher是的，并且您的答案是正确的，但是您需要像使用3个参数一样使用on，才能产生所需的效果。不。它将是$'.checkbox.的父项。在'change'上，'.checkblox类'，函数@凯文布彻：不。在调用时只绑定到现有的checkbox类元素；任何使用该类动态创建的元素都不会有对更改事件的回调。@KevinBoucher你在说什么？不，也不可能。这只能是授权方式，这正是Shmidty所说的。Sushil的答案与jQuery文档中的普通bind没有什么不同：事件处理程序只绑定到当前选定的元素；在代码调用.on时，它们必须存在于页面上。@KevinBoucher是的，并且您的答案是正确的，但是您需要像使用on一样使用3个参数，才能产生所需的效果。谢谢，它可以工作！所以我假设在加载所有dom之前都会等待？这是使用委派解决问题的正确方法。尽管为OP找到一个比文档更具体的容器是很理想的do@Ibrahim是的，您仍然需要将其放在document.ready中，并且看起来元素div是可以使用的正确父元素。@Ibrahim不，不是真的。这样做的原因是处理程序被分配给了在调用绑定时出现的文档。然后，当事件传播到该元素时，它将应用到与选择器匹配的任何元素，无论是动态添加的还是默认加载的。谢谢，它可以工作！所以我假设在加载所有dom之前都会等待？这是使用委派解决问题的正确方法。尽管为OP找到一个比文档更具体的容器是很理想的do@Ibrahim是的，您仍然需要将其放在document.ready中，并且看起来元素div是可以使用的正确父元素。@Ibrahim不，不是真的。这样做的原因是处理程序被分配给了在调用绑定时出现的文档。然后，当事件传播到该元素时，它被应用到匹配选择器的任何元素，无论是动态添加还是默认加载。OK问题通过LIFE解决，但是考虑使用模板来即时构建HTML。jquery.tmpl或underline.js非常适合于此job@melanke谢谢你的提示，我一定会用它：好，这个问题是通过现场解决，但考虑使用模板来建立HTML即时。jquery.tmpl或underline.js非常适合于此job@melanke谢谢你的提示，我一定会使用它：