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添加复选框时都可以重新执行此代码（或类似且窄的代码）。

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

3 个答案: