分页时不再监听 jQuery 事件

Question

我正在使用在bootstrap-table 中实现的分页，我最近注意到在使用它时，我的自定义 jQuery 脚本不再工作了。

更准确地说，这里是一个 sn-p ：

$(document).ready(function() {

  $('.form-modal-confirm-remove').click(function() {

    alert("Test");

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-fr-FR.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table data-toggle="table" data-classes="table table-hover table-condensed table-no-bordered" data-pagination="true" data-page-size="2">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Test
      </td>
      <td>
        <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer">
          <i class="fa fa-trash"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Test
      </td>
      <td>
        <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer">
          <i class="fa fa-trash"></i>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        Test
      </td>
      <td>
        <button type="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer">
          <i class="fa fa-trash"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

您可以看到单击删除按钮时会显示一个警报。然后，当您移动到第二页时，警报不再弹出。

你可以回到第1页，警报仍然没有出现。

Answer 1

请使用 .on 而不是 .click 方法。 .on 方法适用于动态添加的元素。

$(document).ready(function() {

  $(document).on('click','.form-modal-confirm-remove',function() {

    alert("Test");

  });

});

Answer 2

这是因为 DOM 被再次加载，我们没有事件监听器。您需要将 js 处理程序与第二页的删除按钮一起打印。或简单地添加。

您在后端使用什么？如果是 PHP 或类似的，那么您可以动态生成 ID。但如果你不是，那么你可以..

<buttontype="button" class="btn btn-danger btn-circle form-modal-confirm-remove" data-toggle="tooltip" data-placement="top" title="Supprimer" onclick="delete_row();"><i class="fa fa-trash"></i></button>

---

function delete_row(this) {
    alert('hello');
}