jquery函数在表的第二页上不起作用[重复]
Posted
技术标签:
【中文标题】jquery函数在表的第二页上不起作用[重复]【英文标题】:jquery function doesn't work on second page of table [duplicate] 【发布时间】:2019-03-27 10:24:36 【问题描述】:我目前正在使用来自数据库的数据通过 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">×</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
【问题讨论】:
【参考方案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函数在表的第二页上不起作用[重复]的主要内容,如果未能解决你的问题,请参考以下文章
为啥 onclick 在 Rails4 和 coffeescript 中的 turbolinks 的第二页请求上不起作用?
在 DataTables 的第二页中添加行后,操作事件不起作用