Question

我已经看过关于此主题的其他帖子，但他们总是在重绘时更改元素。我有一个项目列表，我想点击一个并通过ajax删除它，然后重绘相同的列表，并让它可点击。重绘后的点击不起作用。以下代码重新绘制列表一次。然后＆＃39;列表＆＃39;项目不再可点击。我想＆＃39;在＆＃39;应该处理这件事。我怎样才能做到这一点？

$('.listto').on('click',function() {
    var tmp = $(this).attr('id').substr(1).split("|");
    $.ajax({url: '/contact/removefromlist/'+tmp[0]+'/'+tmp[1],
        success: function(data) {
            redrawtolist(data,tmp[1])
        }
    });
});

function redrawtolist(data,item) {
    var dat = JSON.parse(data);
    var str = "";
    $.each(dat, function(index, rel) {
        str += '<div id="t'+index+'|'+item+'" class="listto">'+rel+'</div>';
    });
    $('#tolist').html(str);
}

Answer 1

更换元素时，处理程序已消失。您可以使用事件委派来解决此问题：

$('#tolist').on('click', '.listto', function() {

现在，只要不替换#tolist，就不会通过替换.listto元素来删除处理程序。

您可以在on documentation中了解有关事件委派的更多信息。

Answer 2

将处理程序更改为：

$('#tolist').on('click', '.listto', function(){})

使用事件委托是将事件绑定到动态添加元素的好方法。

您可以在此页面上获得有关直接绑定和委托绑定的大量信息：http://api.jquery.com/on/

Answer 3

您的问题是您正在将事件附加到尚未准备好接收该事件的元素。您应该将事件附加到父元素，然后您可以过滤.listto。这样，无论何时添加可点击元素都无关紧要，它将起作用。这称为事件委托。您将处理事件的任务委托给另一个元素。

HTML：

<body>
    <button>Click here to add book.</button>
</body>

你的JS：

$(document).on("click", ".listto", function() {
    alert('it works!');
});

此外，在执行此操作时，请勿将其附加到树太高的父级。您想将它附加到最近的可能父元素。我们不需要对document这样的事件进行点击事件，因为特定于哪些元素会获得此事件是个好主意。将其附加到document意味着任何具有.listto类的元素都可以单击并响应相同的代码。如果您想在不同的按钮中使用不同的功能，则不能，因为它们都响应了附加到document的相同代码。

$('#tolist').on("click", ".listto", function() { //This would be best, but will only work if #tolist is not dynamic
    alert('it works!');
});

Jquery - 如何在重绘后动态添加可点击元素

3 个答案: