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

您必须使用事件委派

$(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内容，其目的是将事件委托给该包装器，而不是直接在动态元素上绑定处理程序。

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

2 个答案: