加載動態內容后jQuery函數不起作用

Question

我正在使用下面的代碼。 這是引導程序3刪除確認消息。

$(document).ready(function(){

$('a.btnDelete').on('click', function (e) {
    e.preventDefault();
    var id = $(this).closest('div').data('id');
    $('#myModal').data('id', id).modal('show');
});

$('#btnDelteYes').click(function () {
    var id = $('#myModal').data('id');
    var dataString = 'id='+ id ;
    $('[data-id=' + id + ']').parent().remove();
    $('#myModal').modal('hide');
    //ajax
    $.ajax({
type: "POST",
url: "delete.php",
data: dataString,
cache: false,
success: function(html)
{
//$(".fav-count").html(html);
$("#output").html(html);
}
});
//ajax ends
});
});

這是我正在使用的觸發元素

<div data-id="MYID"><a class="btnDelete" href="#">Delete</a></div>

而且我正在動態地使用相同的HTML元素來觸發刪除，但它不起作用。

有人可以指出正確的方法嗎？

Answer 1

您必須使用事件委托

$(document).on("click" , '#btnDelteYes' ,function () {

差不多：將單擊較高的位置綁定到運行腳本時存在的內容，然后單擊該內容時，告訴它將click事件傳遞給#btnDelteYes元素

由於缺少信息，我無法理解您對代碼的確切操作，但是答案是：您應該在動態插入的內容上使用事件委托

Answer 2

你可以試試

$('[data-id=MYID]').on('click','.btnDelteYes',function({
    e.preventDefault();
    var id = $(this).closest('div').data('id');
    $('#myModal').data('id', id).modal('show');
});

這里<div data-id="MYID">應該是硬編碼的html內容，其想法是將事件委托給該包裝器，而不是直接在動態元素上綁定處理程序。