我正在开发一个移动应用程序，我目前正在使用on()方法来实现滑动删除功能(我知道有一些库可以让我这样做，并且我对您对不同选项的优点的任何想法持开放态度)。我的代码看起来像这样:
var favArticles = $('#favoritesList li');
favArticles.each(function(i, li){
var id = $(li).attr('id');
$(li).on("swipeLeft",function(){
//console.log('SwipeLeft ' + id);
var html = $(li).html();
var button = '<div ><button onclick="favDelete(id, i)">Delete</a></div>';
$(li).html('<div style="position:relative;">' + html + button + '</div>');
});
});
我正在尝试管理一个可变的文章列表，所以每当我渲染收藏列表时，我都会抓取所有当前文章，并将滑动事件绑定到它们。如果滑动，文章顶部会出现一个按钮，当用户点击该按钮时，将运行一个函数，从列表中删除滑动的文章，并将其从存储的收藏夹中删除。
在favDelete中，我使用索引i来删除()正确的li。这意味着每次删除一个元素时，我都需要用更新后的I值重新创建所有事件。
所以，我的问题是:如果我再次调用on()，对于相同DOM元素上的相同事件，旧绑定会被覆盖吗?或者通过不断向列表元素添加新的on()操作来创建内存泄漏?
更新:是的，JQuery，不是Javascript。的歉意。我知道我的favDelete调用不会像它显示的那样工作，我省略了一堆引号，试图提高可读性。
我将只使用两个事件处理程序和事件委托:一个用于滑动事件，一个用于单击删除按钮。
我不知道swipeLeft是否与事件委托一起工作，但即使不是，它也不会改变太多:
$('#favoritesList').on('swipeLeft', 'li', function() {
// show delete button
// or $(this).html(...)
$(this).append('<div class="deleteButton"><button>Delete</a></div>');
}).on('click', '.deleteButton button', function() {
// find ancestor li element
var $li = $(this).closest('li');
// and pass it to favDelete
favDelete($li);
// if you don't remove the element in the favDelete, do it here:
$li.remove();
});
使用事件委托的删除按钮是最有意义的，因为你是"不断"添加和删除它们。
了解更多关于事件委托的信息
你可以用deleteButton类的CSS规则做的所有样式。您还必须更改您的favDelete方法，以接受li元素(或者更确切地说，是带有li元素的jQuery对象)，而不是ID和索引。
如果我再次调用
on()，对于同一DOM元素上的相同事件，旧绑定会被覆盖吗?
.on()将始终添加一个新的事件处理程序。在您的代码中，您甚至为每个列表元素创建一个新的事件处理程序函数，这确实是对内存的浪费。
在上面的代码中，对于所有li和button元素，只有两个事件处理程序。
除了硬编码索引，还有另外两种方法:
- 使用ID选择正确的
LI元素(在你的favDelete函数中) - 传入一个选择器而不是索引(即
$(this).closest('li'))
如果你再次调用'on'，之前的绑定将仍然有效-例如:如果你调用几次(假设是5次)on('click'， function() {console.log('fired');}。当你点击一次对象时，它会投掷"发射"五次。