Javascript 将事件绑定到动态创建的元素

在我的项目中的一个jsp页面中，我创建了动态地将一些元素附加到表中，方法如下：

$('.auth').each(function(index, elem) {
    $(elem).click(function(){
        //do you stuff here!
        var index = $(elem).data('key'); //this will read data-key attribute

        var div = "#edit_autorizacao_"+index;
        $(div).toggle();

        $('#auth-'+index+' tbody.auth').remove();
        var newRow = $('<tr>');

        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/lista_autorizacao"/>",
            cache: false
        }).done(function(data){
            var obj_auth = jQuery.parseJSON( data );

            for(var item in obj_auth.Auth) {
                var checkbox = $('<tr>');
                checkbox.append('<td><input type="checkbox" class="auth_check" data-user="'+index+'" data-key="'+obj_auth.Auth[item].id+'" name="'+obj_auth.Auth[item].nome+'"></td> <td>'+obj_auth.Auth[item].nome+'</td>');
                checkbox.appendTo(newRow);
            }

            $('#auth-'+index).append('<tbody class="auth">');
            $('#auth-'+index+' tbody.auth').append(newRow);
        });

        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/lista_autorizacao_usuario"/>",
            cache: false,
            data: {id: index}
        }).done(function(data){
            var obj_auth = jQuery.parseJSON( data );

            for(var item in obj_auth.Auth) {
                var checkbox = $('input[name='+obj_auth.Auth[item].nome+']');
                $(checkbox).attr("checked","true");
            }
        });
    });
});

$('.auth').on('click', '.auth_check', function(event){
        var id_auth = $(this).data('key');
        var id_user = $(this).data('user');
        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/toggle_autorizacao"/>",
            cache: false,
            data: {id_usuario: id_user, id_autorizacao: id_auth}
        }).done(function(data){
            if(data == "yes") {
                $("#result_auth").empty().append("ok").hide(3000);
            }
            else if(data == "not") {
                $("#result_auth").empty().append("erro").hide(3000);
            }
            else {
                $("#result_auth").empty().append("sem acesso").hide(3000);
            }
        });
});

$('.auth_container').on('click', '.auth_check', function(event){

$（'.auth'）。每个（函数（索引，元素）{
$（元素）。单击（函数（）{
//你喜欢这里的东西！
var index=$（elem）.data（'key'）；//这将读取数据键属性
var div=“#编辑_自动编辑”+索引；
$（div.toggle（）；
$（“#auth-”+索引+“tbody.auth”）.remove（）；
var newRow=$（''）；
$.ajax({
键入：“获取”，
url:“”，
缓存：false
}).完成（功能（数据）{
var obj_auth=jQuery.parseJSON（数据）；
for（obj_auth.auth中的变量项）{
var复选框=$（''）；
复选框.append（“”+obj_auth.auth[item].nome+“”）；
复选框.appendTo（newRow）；
}
$（“#auth-”+索引）.append（“”）；
$（“#auth-”+索引+“tbody.auth”）.append（newRow）；
});
$.ajax({
键入：“获取”，
url:“”，
cache:false，
数据：{id:index}
}).完成（功能（数据）{
var obj_auth=jQuery.parseJSON（数据）；
for（obj_auth.auth中的变量项）{
var checkbox=$（'input[name='+obj_auth.auth[item].nome+']'）；
$（复选框）.attr（“选中”、“为真”）；
}
});
});
});

现在，对于每个元素：

checkbox.append('<td><input type="checkbox" class="auth_check" data-user="'+index+'" data-key="'+obj_auth.Auth[item].id+'" name="'+obj_auth.Auth[item].nome+'"></td> <td>'+obj_auth.Auth[item].nome+'</td>');

checkbox.append（“”+obj_auth.auth[item].nome+“”）；

我想绑定一个“点击”事件。现在，我是这样做的：

$('.auth').each(function(index, elem) {
    $(elem).click(function(){
        //do you stuff here!
        var index = $(elem).data('key'); //this will read data-key attribute

        var div = "#edit_autorizacao_"+index;
        $(div).toggle();

        $('#auth-'+index+' tbody.auth').remove();
        var newRow = $('<tr>');

        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/lista_autorizacao"/>",
            cache: false
        }).done(function(data){
            var obj_auth = jQuery.parseJSON( data );

            for(var item in obj_auth.Auth) {
                var checkbox = $('<tr>');
                checkbox.append('<td><input type="checkbox" class="auth_check" data-user="'+index+'" data-key="'+obj_auth.Auth[item].id+'" name="'+obj_auth.Auth[item].nome+'"></td> <td>'+obj_auth.Auth[item].nome+'</td>');
                checkbox.appendTo(newRow);
            }

            $('#auth-'+index).append('<tbody class="auth">');
            $('#auth-'+index+' tbody.auth').append(newRow);
        });

        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/lista_autorizacao_usuario"/>",
            cache: false,
            data: {id: index}
        }).done(function(data){
            var obj_auth = jQuery.parseJSON( data );

            for(var item in obj_auth.Auth) {
                var checkbox = $('input[name='+obj_auth.Auth[item].nome+']');
                $(checkbox).attr("checked","true");
            }
        });
    });
});

$('.auth').on('click', '.auth_check', function(event){
        var id_auth = $(this).data('key');
        var id_user = $(this).data('user');
        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/toggle_autorizacao"/>",
            cache: false,
            data: {id_usuario: id_user, id_autorizacao: id_auth}
        }).done(function(data){
            if(data == "yes") {
                $("#result_auth").empty().append("ok").hide(3000);
            }
            else if(data == "not") {
                $("#result_auth").empty().append("erro").hide(3000);
            }
            else {
                $("#result_auth").empty().append("sem acesso").hide(3000);
            }
        });
});

$('.auth_container').on('click', '.auth_check', function(event){

$（'.auth'）。在（'click'，'.auth_check'，函数（事件）{
var id_auth=$（this）.data（'key'）；
var id_user=$（this）.data（'user'）；
$.ajax({
键入：“获取”，
url:“”，
cache:false，
数据：{id_usuario:id_user，id_autorizao:id_auth}
}).完成（功能（数据）{
如果（数据=“是”）{
$（“#result_auth”）.empty（）.append（“ok”）.hide（3000）；
}
否则如果（数据==“非”）{
$（“#result_auth”）.empty（）.append（“erro”）.hide（3000）；
}
否则{
$（“#result_auth”）.empty（）.append（“sem acesso”）.hide（3000）；
}
});
});

---

但是当我点击元素时，什么也没有发生。有人可以在这里指出我做错了什么？

好的，打开这个主题后，我就找到了解决问题的方法。碰巧我正在使用两个动态创建的元素进行绑定；第一个必须是静态的。因此，我为tbody元素添加了'class'atribute'auth_container'，并按如下方式进行绑定：

$('.auth').each(function(index, elem) {
    $(elem).click(function(){
        //do you stuff here!
        var index = $(elem).data('key'); //this will read data-key attribute

        var div = "#edit_autorizacao_"+index;
        $(div).toggle();

        $('#auth-'+index+' tbody.auth').remove();
        var newRow = $('<tr>');

        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/lista_autorizacao"/>",
            cache: false
        }).done(function(data){
            var obj_auth = jQuery.parseJSON( data );

            for(var item in obj_auth.Auth) {
                var checkbox = $('<tr>');
                checkbox.append('<td><input type="checkbox" class="auth_check" data-user="'+index+'" data-key="'+obj_auth.Auth[item].id+'" name="'+obj_auth.Auth[item].nome+'"></td> <td>'+obj_auth.Auth[item].nome+'</td>');
                checkbox.appendTo(newRow);
            }

            $('#auth-'+index).append('<tbody class="auth">');
            $('#auth-'+index+' tbody.auth').append(newRow);
        });

        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/lista_autorizacao_usuario"/>",
            cache: false,
            data: {id: index}
        }).done(function(data){
            var obj_auth = jQuery.parseJSON( data );

            for(var item in obj_auth.Auth) {
                var checkbox = $('input[name='+obj_auth.Auth[item].nome+']');
                $(checkbox).attr("checked","true");
            }
        });
    });
});

$('.auth').on('click', '.auth_check', function(event){
        var id_auth = $(this).data('key');
        var id_user = $(this).data('user');
        $.ajax({
            type: "GET",
            url: "<c:out value="${pageContext.request.contextPath}/usuario/toggle_autorizacao"/>",
            cache: false,
            data: {id_usuario: id_user, id_autorizacao: id_auth}
        }).done(function(data){
            if(data == "yes") {
                $("#result_auth").empty().append("ok").hide(3000);
            }
            else if(data == "not") {
                $("#result_auth").empty().append("erro").hide(3000);
            }
            else {
                $("#result_auth").empty().append("sem acesso").hide(3000);
            }
        });
});

$('.auth_container').on('click', '.auth_check', function(event){

---

现在它工作正常。

您的DOM元素看起来不太正确。当您执行

复选框时，您正在将一个
附加到另一个
。appendTo（newRow）

。事件委派在我看来是正确的。如果您在处理程序中放置了一个

警报

，它会出现吗？好的，我只是解决了这个问题。碰巧我正在使用一个动态元素来动态地创建与其他元素的绑定；它需要是一个静态的，就像我在下面解释的那样。从你的问题看，

.auth

也不是动态的。它有助于包含HTML。