0

我正在开发一个移动应用程序，我目前正在使用该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 调用不会像它显示的那样工作，我省略了为帖子删除了一堆引号以试图提高可读性。

4

3 回答 3

2

我将只使用两个事件处理程序和事件委托：一个用于滑动事件，一个用于单击删除按钮。
我不知道是否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元素（或者更确切地说是带有元素的 jQuery 对象li）而不是 ID 和索引。

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

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

在我上面的代码中，all和元素只有两个事件处理程序。libutton

于 2013-06-03T18:58:38.003 回答
0

除了硬编码索引，还有另外两种方法可以做到这一点：

  1. 使用 ID 选择正确的LI元素（在您的 favDelete 函数中）
  2. 传入选择器而不是索引（即$(this).closest('li')）
于 2013-06-03T18:58:27.540 回答
0

如果您再次调用“on”，则以前的绑定仍然有效 - 例如。如果你会调用几次（比如说 5 次） on('click', function() { console.log('fired'); }。当你在对象上单击一次时，它会 thorw 'fired ' 五次。

于 2013-06-03T18:59:05.690 回答