模態警報但確認按鈕沒有對腳本作出反應

Question

我想在用戶想要從那裏刪除項目時進行動態模式彈出警報。

我有彈出本身並沒有問題，正從與模態視圖一起分析該項目的ID，但是......

在模態視圖中的按鈕從腳本生成的，如顯示fiddle，當我點擊模式中的「刪除」按鈕，並希望它激活.js功能時，什麼都不會發生？

我錯過了什麼，還是有另一種方式來做到這一點？

JS：

$('.delete').click(function(){ 

    var pid = $(this).attr("data-id"); 
    var pname = $(this).attr("data-name"); 

    $(".delete-footer").html('<button type="button" class="btn btn-warning" data-dismiss="modal">Regret</button><a href="#" data-id="'+pid+'" class="btn btn-info do_delete">Delete</a>'); 
    $('#confirm-delete').modal('show'); 

}); 

$('.do_delete').click(function(){ 

    alert("I am here!"); 

    var pid = $(this).attr("data-id"); 
    $('#confirm-delete').modal('hide'); 

}); 

HTML：

<a href="#" class="delete" data-id="23">Delete the project</a> 

<div class="modal fade" id="confirm-delete" data-backdrop="static"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <h4 class="modal-title">Delete project?</h4> 
      </div> 

      <div class="modal-body delete-body"> 
       Are you sure you want to delete project?     
      </div> 

      <div class="modal-footer delete-footer"> 

      </div> 
     </div> 
    </div> 
</div> 

鏈接到fiddle

任何幫助表示讚賞和感謝提前:-)

Answer 1

您需要綁定事件這種方式

$(document).on('click', '.do_delete', function(){ 

    alert("I am here!"); 

    var pid = $(this).attr("data-id"); 
    $('#confirm-delete').modal('hide'); 

}); 

原因

因爲你動態地添加元素到文檔中。而且，您用來綁定單擊事件的方式可確保僅綁定到文檔第一次準備好時出現的元素。

動態添加的元素不會獲得綁定。我們需要爲這些使用JQuery的.on（）。

Answer 2

$（ '刪除'）點擊（函數（）{

var pid = $(this).attr("data-id"); 
var pname = $(this).attr("data-name"); 

$(".delete-footer").html('<button type="button" class="btn btn-warning" data-dismiss="modal">Regret</button><a href="#" data-id="'+pid+'" class="btn btn-info do_delete">Delete</a>'); 
$('#confirm-delete').modal('show'); 


$('.do_delete').click(function(){ 

alert("I am here!"); 

var pid = $(this).attr("data-id"); 
$('#confirm-delete').modal('hide'); 

}）。 }）;