動態生成的按鈕不適用於Javascript

我有一個動態生成的表格。就像這樣：動態生成的按鈕不適用於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>

然後我有一個按鈕來添加一個新的任務與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生成的相同的Propeties。 Ids也是正確的，沒有區別。當我點擊編輯或刪除時，我沒有得到任何迴應。甚至沒有在控制檯中的錯誤。當我刷新網站時，按鈕可以正常工作，因此存儲的信息實際上是正確的。

任何幫助，將不勝感激。

編輯：處理器

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

來源

2017-04-21 prgrm

，但我99 ％確定您需要將它們更改爲委派的事件處理程序。 –

要知道你的問題，你必須顯示編輯按鈕事件處理程序。 –

@RoryMcCrossan添加處理程序。 – prgrm

這種使用這種方式你不能這樣做，你必須使用委託。

例

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

或使用delegate ，這是你是如何連接的處理程序，這些按鈕您還沒有表現出類似的問題 jQuery click function doesn't work after ajax call?

來源

2017-04-21 08:49:59

'委託人'已被棄用 – charlietfl

動態生成的按鈕不適用於Javascript

回答

相關問題