Question

我有一个动态表，总是当我点击添加它时添加一些字段和两个动作一个要更改而另一个要删除，所以当我点击这些动作时我想要触发一个jquery事件，但是当这些行是动态添加这不起作用，只有当我静态地（红色）放置它时我的动态线与静态具有相同的效果吗？

＆＃13;

$(document).ready(function() {

  $('.btnAlterarContato').click(function() {
    alert('Click in Change');
    return false;
  });

  $('.btnRemoverContato').click(function() {
    alert('Remove in Change');
    return false;
  });


  $('#btnADD').click(function() {

    var newRow = $("<tr>");
    var cols = "";



    cols += '<td>';

    cols += '<a class="btnRemoverContato btnPadraoTabela"  href="" > Remover</a>'
    cols += '<a class="btnAlterarContato btnPadraoTabela" href="">   Alterar</a>'
    cols += '</td>';




    newRow.append(cols);
    $("#contatos").append(newRow);



  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<button id="btnADD"> Add </button>


<table id="contatos" class="table table-hover table-sm ">
  <thead>
    <tr>


      <th>Ações</th>
    </tr>
  </thead>
  <tbody>

    <td>
      <a style="color:red;" class='btnRemoverContato btnPadraoTabela' href=""> Remover</a>
      <a style="color:red;" class='btnAlterarContato btnPadraoTabela' href="">   Alterar</a>
    </td>


  </tbody>
</table>

＆＃13;

Answer 1

您需要使用jQuery Event Delegation

$(document).on('click','.btnAlterarContato',function() {
   alert('Click in Change');
   return false;
});

$(document).on('click','.btnRemoverContato',function() {
   alert('Remove in Change');
   return false;
});

说明： -

上面的代码将起作用，因为它向父级添加了事件监听器元素，将为匹配选择器的所有后代触发， 这些后代是现在存在还是将来添加。

Answer 2

问题如下：

标签静态在同一个DOM引用中，而动态添加的那些在其他引用DOM中。

使用On Event jquery

例如：

$(document).on('click','.btnAlterarContato',function(){
//your code here
});

$(document).on('click','.btnRemoverContato',function(){
//your code here
});

或在标签中使用事件onclick调用函数

<a style="color:red;" class='btnRemoverContato btnPadraoTabela' href="" onclick="nameFunction()"> Remover</a>

function nameFunction(){
//your code here
}

我的英语：D

事件点击表动态

2 个答案: