javascript - JQuery on() 的使用和覆盖

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>');
     });
 });

我正在尝试管理一个可变的文章列表，因此每当我呈现收藏夹列表时，我都会获取所有当前的文章，并将滑动事件绑定(bind)到它们。如果滑动，文章顶部会出现一个按钮，当用户点击该按钮时，会运行一个函数，从列表中删除滑动的 li，并将其从存储的收藏夹中删除。

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

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

更新:是的，JQuery，而不是 Javascript。道歉。我知道我的 favDelete 调用不会像显示的那样工作，我省略了帖子中的一堆引号，以尝试提高可读性。

Answer 1

我只使用两个事件处理程序和事件委托(delegate):一个用于滑动事件，一个用于单击删除按钮。
我不知道 swipeLeft 是否适用于事件委托(delegate)，但即使不能，也不会改变太多:

$('#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();
});

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

<强> Learn more about event delegation .

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

<小时/>

if I call on() again, for the same event on the same DOM element, will the old binding be overwritten?

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

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