使用 jQuery 添加包含按钮的新行到 table

Question

我正在使用以下代码将新行添加到 table 中，称为 people_table：

  $("#add_new_row").click(function() {
    console.log("***");
    $('table#people_table').append('<tr><td>Dima</td><td>Petrov</td><td>30</td><td><button type="button" class="btn btn-success" id="change_4">Change</button></td></tr>');

  });
...
<button type="button" class="btn btn-primary" id="add_new_row">Add new row</button>
<table class="table table-hover" id="people_table">
   <tr>
    <th>Name</th>
    <th>Surname</th>
    <th>Age</th>
    <th>Modify</th>
   </tr>
   {% for person in people %}
   <tr>
     <td>{{ person[1] }}</td>
     <td>{{ person[2] }}</td>
     <td>{{ person[3] }}</td>
     <td><button type="button" class="btn btn-success" id="change_{{ person[0] }}">Change</button></td>
   </tr>
   {% endfor%}
</table>

但是在添加行之后有如下函数

  $("button[id^='change_']").click(function() {
    console.log("+++");
  });

不适用于新添加行中的按钮，但它适用于其他按钮。有什么问题吗？

Answer 1

试试这个，对动态添加的元素使用方法...

 $(document).on('click', 'button[id^="change_"]', function() {
        console.log("+++");
      });

Answer 2

对于新添加的 dom 元素，.click() 在这种情况下没有用，您必须使用 .on('click' 事件监听器。

$("button[id^='change_']").on('click',function() {
    console.log("+++");
});

Answer 3

试试这个enter link description here

 $("#add_new_row").click(function() {
    console.log("***");
    $('table#people_table').append('<tr><td>Dima</td><td>Petrov</td><td>30</td><td><button type="button" class="btn btn-success" id="change_4">Change</button></td></tr>');
addNewRow();
  });

  function addNewRow()
  {
   $("button[id^='change_']").click(function() {
    alert('click')
  });
  }

使用 jQuery 添加包含按钮的新行到 table

Adding a new row which contains button into table using jQuery

javascript

jquery

frontend

twitter-bootstrap