Question

我正在开发移动应用，我目前正在使用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>');
     });
 });

我正在尝试管理一个可变的文章列表，因此每当我呈现收藏夹列表时，我都会抓取所有当前文章，并将滑动事件绑定到它们。如果滑动，则会在文章顶部显示一个按钮，当用户点击按钮时，会运行一个功能，从列表中删除刷过的li，并从存储的收藏夹中删除它。

在favDelete中，我使用索引i删除（）正确的li。这意味着每次删除元素时，我都需要使用i的更新值重新创建所有事件。

所以，我的问题是：如果我再次调用on()，对于同一个DOM元素上的同一事件，旧的绑定是否会被覆盖？或者通过不断向我的列表元素添加新的on()操作来创建内存泄漏？

更新：是的，JQuery，而不是Javascript。道歉。而且我知道我的favDelete调用将无法正常显示，我省略了为帖子删除了一堆引号以试图提高可读性。

Answer 1

我只使用两个事件处理程序和事件委托：一个用于滑动事件，另一个用于单击删除按钮。
我不知道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();
});

使用事件委派对删除按钮最有意义，因为您“不断”添加和删除它们。

<强> Learn more about event delegation

您可以使用deleteButton类的CSS规则执行所有样式设置。您还必须更改favDelete方法以接受li元素（或者更确切地说是带有li元素的jQuery对象）而不是ID和索引。

如果我再次调用on()，对同一个DOM元素上的同一事件，是否会覆盖旧的绑定？

.on()将始终添加新的事件处理程序。在你的代码中，你甚至为每个列表元素创建一个新的事件处理函数，这确实是浪费内存。

在上面的代码中，所有li和button元素只有两个事件处理程序。

Answer 2

另外两种方法可以做到这一点，而不是硬编码索引：

使用ID选择正确的LI元素（在您的favDelete函数中）
传入选择器而不是索引（即$(this).closest('li')）

Answer 3

如果你再次打电话'打开'，之前的绑定仍然有效 - 例如如果你打电话几次（让我们说5次）（'click'，function（）{console.log（'fired'）;}。当你在对象上点击一次时，它会被'解雇' '五次。

JQuery on（）使用和覆盖

3 个答案: