动态生成的按钮不'；我不能使用Javascript

我有一个动态生成的表。大概是这样的：

<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>

---

你不能这样做，你必须使用授权

示例

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

或使用

委托

这是一个类似的问题

---

您还没有显示如何将处理程序附加到这些按钮，但我99%确定您需要将它们更改为委托事件处理程序。要了解您的问题，您必须显示编辑按钮事件处理程序。@RoryMcCrossan添加了该处理程序。您只需将单击处理程序更改为

$（文档）。on（'click'，'delete task'，函数（）{//Your code}）；

@prgrm谢谢。在这种情况下，您肯定需要一个委托事件处理程序。有关详细信息，请参阅重复问题

委托

已被弃用

   $('.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);
            }
        });
    });

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