javascript - 动态生成的按钮不适用于 Javascript

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我有一个动态生成的表。像这样的事情:

<thead>
<tr>
<th>Task</th>
<th>options</th>
</tr>
</thead>
<tbody id="tasks-list">
@foreach($tasks as $task)
<tr id="contact_{{$contact->id}}">
<td>{{task->name}}
 <td><button class="btn btn-warning btn-xs btn-detail open-modal" value="{{$contact->id}}">Edit</button>
<button class="btn btn-danger btn-xs btn-delete delete-task" value="{{$contact->id}}">Delete</button></td>
</tr>
@endforeach
 </tbody>
</table>

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

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

 var task = '<tr id="contact_' + data.id + '">' +'<td>' + data.name + '</td>' +
'<td><button class="btn btn-warning btn-xs btn-detail open-modal" value="' + data.id + '">Editieren</button><div style="margin-left: 3px"' +
'<button class="btn btn-danger btn-xs btn-delete delete-task" value="' 
+ data.id + '">Löschen</button></td></tr>';

 $('#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('Error:', data);
            }
        });
    });

Answer 1

您不能使用这种方式来做到这一点，您必须使用委托(delegate)。

示例

$(document).on('click','.delete-task',function(){
    //your business here
}); 

或使用委托(delegate)这是一个类似的问题 jQuery click function doesn't work after ajax call?