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具有正确的数据值也是如此。

我已经研究了一段时间，但是我无法使它起作用。我会很感激我能得到的任何帮助。

谢谢

马太

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);
 });

jQuery函数在表的第二页上不起作用

1 个答案: