Editable table with Jquery and PHP problem

Question

Good afternoon, I’ve been having a problem for a few days trying and I can’t seem to fix it, I am trying to make an editable table, the problem is that after I copy the table with json I can’t do anything with the <td>, everything I put on "append" is not recognized after.

$("button[name='visualizar']").on('click', function() {
    var i = 0;
    $("#tabela").empty();
    $.ajax({
        type: "post",
        dataType: "json",
        url: "php/select_db.php",
        success: function(dados) {
            for (i = 0; dados.length > i; i++) {
                $("#tabela").append("<tr><td>" + dados[i].modulo + "</td><td>" + dados[i].codigo + "</td></tr>");
            }
        },
        error: function() {
            alert("fail");
        }
        //$("#aviso2").toggle('slow');
    });
});

so far all beauty//

the above code inserts the data into the table, but these cells that are inserted via jquery are not recognized later.

if I use $("#tabela tbody tr td").dblclick(function()}; nothing happens.

Now if I create a test table directly on the front the function recognizes the table and executes the code that is inside the function. If anyone can help me, I’ve done a lot of research and haven’t found what’s causing this problem. Thank you very much.

Answer 1

Hello, I believe your problem lies in the scope of the DOM tree.

When you upload a website, a DOM tree is generated and the insertion of later HTML fragments will not be in this tree and will not be recognized.

Try that later:

 $('body').on('click','td',function(){
              //sua função
           });

The documentation: http://api.jquery.com/on/ ; from what I understand, the on() is above the standard click reading and works as long as the element exists