動的に生成されたボタンはJavascriptで動作しません

Question

私は動的に生成されたテーブルを持っています。このようなもの：

<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も正しいですが、違いはありません。私が編集や削除をクリックすると、私は何の反応も得ません。コンソールにもエラーはありません。サイトを更新すると、ボタンが機能し、保存された情報が実際に正しいようになります。

ご協力いただければ幸いです。

EDIT：ハンドラ

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

あなたはその方法を使用してこれを行うことはできませんが、あなたが委任を使用する必要があります。

例

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

またはdelegate を使用し、これは、あなたがそれらのボタンにハンドラをアタッチしている方法を示していないが、私は99だ jQuery click function doesn't work after ajax call?