动态生成的按钮与Javascript不兼容。

15 浏览
0 Comments

动态生成的按钮与Javascript不兼容。

我有一个动态生成的表格。类似于这样：



任务
选项



@foreach($tasks as $task)

{{$task->name}} 



@endforeach

然后我有一个用AJAX添加新任务的按钮。

当成功添加一个任务时，会添加一个新行，包含最近创建的信息：

 var task = '' +'' + data.name + '' +
'
删除';
 $('#tasks-list').append(task);

这个工作得很好。一切都正确地添加了，按钮的属性与Blade生成的按钮相同。ID也是正确的，没有任何区别。当我点击编辑或删除时，没有任何响应。甚至控制台也没有错误。当我刷新页面时，按钮起作用，所以存储的信息实际上是正确的。

任何帮助将不胜感激。

编辑：处理程序

   $('.delete-task').click(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
        var task_id = $(this).val();
        $.ajax({
            type: "DELETE",
            url: '/task_edit/' + task_id,
            success: function (data) {
                console.log(data);
                $("#contact_" + contact_id).remove();
            },
            error: function (data) {
                console.log('错误:', data);
            }
        });
    });

0

1 答案

0 Comments

动态生成的按钮无法与Javascript一起正常工作的原因是需要使用委托方式来实现。

示例代码如下：

$(document).on('click','.delete-task',function(){
    // 在这里写入你的业务逻辑
});

另外，也可以使用`delegate`方法来实现。

此外，以下是一个类似的问题的链接：[jQuery click function doesn't work after ajax call?](https://stackoverflow.com/questions/17715274)

不过需要注意的是，`delegate`方法已经被弃用。

0