jQuery 分页时不再监听事件

Question

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

更准确地说，这是一个片段：

$(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

因为 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');
}

Answer 2

请使用.on代替.click方法。 .on 方法适用于动态添加的元素。

$(document).ready(function() {

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

    alert("Test");

  });

});

jQuery 分页时不再监听事件

jQuery events not listened anymore when pagination

jquery

pagination

bootstrap-table