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

【问题标题】：Jquery doesnot bind events to ajax added domJquery 不会将事件绑定到 ajax 添加的 dom
【发布时间】：2012-10-21 10:03:12
【问题描述】：

我有一个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（即静态），而不是我在这里的设置，它可以工作，我从服务器动态加载数据。

我可以做些什么来及时绑定吗？

和平！

【问题讨论】：

jqfundamentals.com/chapter/events
好的，问题已通过“实时”解决，但请考虑使用模板即时构建 html。 jquery.tmpl 或 underscore.js 非常适合这项工作
@melanke 感谢您的提示，我一定会使用它:)

标签： javascript jquery html ajax dom

【解决方案1】：

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

试试这个：

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

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

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

【讨论】：

谢谢，它有效！所以我假设等到所有 dom 都加载完毕？
这是使用委派解决问题的正确方法。虽然找到比document 更具体的容器是理想的（供OP 做）
@Ibrahim 是的，你仍然需要把这个放在document.ready
并且看起来元素#div是可以使用的正确父元素。
@Ibrahim 不，不是。这样做的原因是处理程序被分配给文档（在调用绑定时存在）。然后，当事件传播到该元素时，它将应用于与选择器匹配的任何元素（无论是动态添加还是默认加载）。

【解决方案2】：

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

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

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

【讨论】：

不。应该是$('.parent-of-checkbox').on('change', '.checkblox-class', function()...);
@KevinBoucher 不。这只会在调用时绑定到现有的checkbox-class 元素；任何具有该类的动态创建的元素都不会对更改事件进行回调。
@KevinBoucher 你在说什么？不，也不可能。它只能是委托方式，这就是 Shmiddty 所说的。 Sushil 的回答和普通的一样bind
来自 jQuery 文档：Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
@KevinBoucher 是的，您的答案是正确的，但您需要像您一样为on 使用 3 个参数，以便获得所需的效果。跨度>

【解决方案3】：

这段代码：

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

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

【讨论】：