javascript - 加载动态内容后 jQuery 函数不起作用

Question

我正在使用下面的代码。这是 bootstrap 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

您必须使用事件委托(delegate)

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

差不多:将点击绑定(bind)到脚本运行时存在的某个东西上，当点击该东西时，告诉它将点击事件传递给 #btnDelteYes 元素

由于缺少信息，我无法理解您在代码上到底做了什么，但答案是:您应该对动态插入的内容使用事件委托(delegate)