Question

在我的项目的一个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");
            }
        });
    });
});

现在，对于每个要素：

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>');

我想绑定一个'click'事件。现在，我正是这样做的：

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

但是当我点击元素时没有任何反应。有人可以指出我在这里做错了吗？

Answer 1

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

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

现在它工作正常。

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

1 个答案: