Question

我使用以下代码在表中添加了一个名为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

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

WL.Server.setActiveUser("AuthRealm", userIdentity);

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将包含按钮的新行添加到表中

3 个答案: