Javascript 为什么当我点击下一页时，编辑或删除按钮不起作用？

这是我的剧本。我可以在第一页上编辑和删除，但当我单击下一页时，编辑和删除不起作用。有什么问题吗

<script>
    $(function(){
      $('.edit').click(function(e){
        e.preventDefault();
        $('#edit').modal('show');
        var id = $(this).data('id');
        getRow(id);
      });

      $('.delete').click(function(e){
        e.preventDefault();
        $('#delete').modal('show');
        var id = $(this).data('id');
        getRow(id);
      });
    });

   function getRow(id){
     $.ajax({
        type: 'POST',
        url: 'attendance_row.php',
        data: {id:id},
        dataType: 'json',
        success: function(response){
        $('#datepicker_edit').val(response.date);
        $('#attendance_date').html(response.date);
        $('#edit_time_in').val(response.time_in);
        $('#edit_time_out').val(response.time_out);
        $('#attid').val(response.attid);
        $('#employee_name').html(response.firstname+' '+response.lastname);
        $('#del_attid').val(response.attid);
        $('#del_employee_name').html(response.firstname+' '+response.lastname);
        }
    });
 }
</script>

$（函数（）{
$（'.edit'）。单击（函数（e）{
e、 预防默认值（）；
$（'编辑'）.modal（'显示'）；
var id=$（this.data（'id'）；
getRow（id）；
});
$（'.delete'）。单击（函数（e）{
e、 预防默认值（）；
$（'删除'）.modal（'显示'）；
var id=$（this.data（'id'）；
getRow（id）；
});
});
函数getRow（id）{
$.ajax({
键入：“POST”，
url:'attention_row.php'，
数据：{id:id}，
数据类型：“json”，
成功：功能（响应）{
$（'#datepicker_edit'）.val（response.date）；
$（“#出席日期”）.html（response.date）；
$（'#edit_time_in'）.val（response.time_in）；
$（'edit_time_out'）.val（response.time_out）；
$（'#attid'）.val（response.attid）；
$（'#employee_name'）.html（response.firstname+''+response.lastname）；
$（'del#u attid'）.val（response.attid）；
$（'#del#u employee_name'）.html（response.firstname+''+response.lastname）；
}
});
}

Ajax调用是异步的

在通过ajax追加元素之前，将注册click处理程序，该处理程序找不到带有$（“.edit”）的元素

您可能应该使用

事件委派

。 尝试更改您的功能：

$(function(){
      $('.edit').click(function(e){
        e.preventDefault();
        $('#edit').modal('show');
        var id = $(this).data('id');
        getRow(id);
      });

      $('.delete').click(function(e){
        e.preventDefault();
        $('#delete').modal('show');
        var id = $(this).data('id');
        getRow(id);
      });
    });

为此：

$(function(){
      $(document).on('click','.edit', function(e){
        e.preventDefault();
        $('#edit').modal('show');
        var id = $(this).data('id');
        getRow(id);
      });

      $(document).on('click','.delete',function(e){
        e.preventDefault();
        $('#delete').modal('show');
        var id = $(this).data('id');
        getRow(id);
      });
    });

---

希望有帮助。

两页中的脚本都相同吗？是的，两页的脚本都相同。为了确定，请转到第二页，按

ctrl+u

查看源页面，看看脚本是否也在那里。您所说的

编辑和删除不起作用是什么意思？
click（）
处理程序是否正在启动？如果是，情态动词是否显示？是否发送ajax请求？以上都没有？当我进入页面时，我可以编辑和删除前10个数据，但一旦我单击“下一步”按钮查看其他数据，然后单击“编辑”或“删除”。按钮不起作用这很有帮助，非常感谢，你能进一步解释吗？别忘了标记为已回答并投票：）