使用ajax更新表

Question

我正在使用 Ajax 更新表，当我在系统中遇到第一个编辑或删除数据的请求时，它起作用了。用 Ajax 更新表后，我不知道会发生什么。添加、编辑和删除不再起作用。

function tabela(dados){

            var template = "<thead><tr> <th>ID</th><th>Nome</th><th>Status</th><th>E-mail</th> <th>Editar</th> <th>Excluir</th> </tr></thead><tbody>";

            var templateContrato = "<tr><td><i class='fa fa-circle' title='OK'></i><span class='statusicon'>#ID#</span></td><td>#NOME#</td><td>#STATUS#</td><td>#EMAIL#</td><td ><div id='EdContrato'> <div id='#EDITAR#'> Editar </div> </div></td><td class='contrato'> <div id='ExContrato'> <div id='#EXCLUIR#'> Excluir </div> </div></td></tr>";

            for (i = 0; i < dados.length; i++) {

                aux = templateContrato;

                aux = aux.replace('#ID#',dados[i].id_contrato);

                aux = aux.replace('#NOME#', dados[i].nome ? dados[i].nome:'');

                aux = aux.replace('#STATUS#',dados[i].status ? dados[i].status:'');

                aux = aux.replace('#EMAIL#', dados[i].email ? dados[i].email:'');

                aux = aux.replace('#EDITAR#', dados[i].id_contrato);

                aux = aux.replace('#EXCLUIR#', dados[i].id_contrato);

                template += aux;

            }                

            template +="</tbody>"

            $("#idContrato").html(template);

        }

        $("#btnAdicionar").click(function(e){

            e.preventDefault();

            var nome = $("input[name=nome]").val();

            var email = $("input[name=email]").val();

            var status = $("input[name=status]").val();

            $.ajax({

                 type:'POST',

                 url:'/adicionar',

                data:{nome:nome, email:email, status:status},

                success:function(data){

               tabela(data);

            }

            });

            $("input[name=nome]").val("");

            $("input[name=email]").val("");

            $("input[name=status]").val("");

        });

不显示任何错误。

Answer 1

由于您正在创建 DOM 元素，因此在第一次重新加载 HTML 后，单击事件将不起作用。您需要使用事件 deligator 或 jquery "on" click$( "#ExContrato" ).on( "click", function() {&nbsp; // logic here});$( "#EdContrato" ).on( "click", function() {&nbsp; // logic here});更多细节在这里