CODEWITHSUNDEEP
javascriptjquery
Kleber Mota
Kleber Mota

Reputation: 9065

Binding event to dynamically created element

In one of jsp pages from my project, I create append some elements to a table dynamically, this way:

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

Now, for each one of the elements:

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

I want bind an 'click' event. Right now, I am doing that in this way:

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

But nothing happens when I click in the element. Someone can point me what I doing wrong here?

Upvotes: 0

Views: 82

Answers (1)

Kleber Mota
Kleber Mota

Reputation: 9065

Ok, after open this topic, I just find a solution to my problem. It happens I am making the binding with two dynamically created elements; the first one must be static. So, I add the 'class' atribute 'auth_container' for a tbody element, and make the bind this way:

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

and now it's working fine.

Upvotes: 1

Related Questions