jquery函数在表的第二页上不起作用[重复]

Question

我目前正在使用来自数据库的数据通过 sql 创建一个表，并且我正在使用以下代码生成每一行：

<tbody>
<?php
foreach($merchants as $merchant) {
   echo '<tr>';
   echo '<td>' . $merchant['id'] . '</td>';
   echo '<td>' . $merchant['name'] . '</td>';
   if ($userIsAdmin){
       echo '<td>' . date("d.m.Y" , strtotime($merchant['import_date'])) . '</td>';
       echo '<td>' . $merchant['import_from'] . '</td>';
   }
   echo '<td>' . $merchant['number_keys'] . '</td>';
   if ($userIsAdmin){
       echo '<td><a class="merchantDelete" href="#" data-id="' . $merchant['id'] . '" data-toggle="modal" data-target="#deleteMerchantModal">
             <i class="fas fa-times"></i></a>
             <a class="merchantEdit" href="#" data-name="' . $merchant['name'] . '" data-hidden="' . $merchant['id'] . '" data-toggle="modal" data-target="#editMerchantModal">
             <i class="far fa-edit"></i></a><input type="text" value="' . $merchant['id'] . '" hidden></td>';
    }
    echo '</tr>';
}
?>
</tbody>

类merchantDelete 和merchantEdit 的元素是删除或编辑数据库中数据的按钮。模式是检查哪些数据应该被编辑，哪些应该被删除。我正在使用data-xxx将所需的数据传递给以下模态。（我只显示1个模态，因为原理相同）

<div class="modal fade" id="editMerchantModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel">Edit Merchant</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
             </div>
             <form method="POST" action="action_merchants.php<?php echo '?location=' . $_SERVER['REQUEST_URI']; ?>">
                 <div class="modal-body">
                     <input type="hidden" name="action2" value="edit">
                     <div class="form-row">
                         <div class="col-4">
                             <div class="form-group">
                                 <input type="hidden" class="form-control" name="hidden" id="modal_hidden" value="">
                             </div>
                             <label for="select_m" class="col-form lable">Curent Name:</label>
                             <input type="text" class="form-control" name="select" id="select_m" disabled>
                             <label for="new_name" class="col-form lable">New Name:</label>
                             <input type="text" class="form-control" name="new_name" id="new_name"
                          </div>
                       </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary form-control" id="new_merchants_submit" value="Edit">
                    </div>
              </form>
         </div>
    </div>
</div>

现在我使用这个 jquery 函数将前面提到的值传递给模态：

<script>
    $(function () {
        $(".merchantEdit").click(function () {
            var name_value = $(this).data('name');
            var hidden_value = $(this).data('hidden');
            $('#select_m').val(name_value);
            $('#modal_hidden').val(hidden_value);
            $('#new_name').val(name_value);
        });
    });
</script>

这可以正常工作，但仅在我的表格的第一页上。我正在使用 ajax 来更改页面。现在的问题是，当我在第二页时，该函数永远不会运行，即使元素 .merchantEdit 和 .merchantDelete 具有正确的数据值。

我已经研究了一段时间，但我无法让它发挥作用。 如果能得到任何帮助，我将不胜感激。

谢谢，

马特.S

Answer 1

这是因为点击正在监听已经渲染到DOM的元素，尝试使用

$(document).on("click",".merchantEdit",function() {
        var name_value = $(this).data('name');
        var hidden_value = $(this).data('hidden');
        $('#select_m').val(name_value);
        $('#modal_hidden').val(hidden_value);
        $('#new_name').val(name_value);
 });