Javascript JQuery on（）的用法和覆盖

我正在开发一个移动应用程序，目前我正在使用

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

var favArticles=$（'favoritesList li'）；
favArticles.每个（函数（i，li）{
var id=$（li）.attr（'id'）；
$（li）.on（“swipeLeft”，function（）{
//console.log（'swipleft'+id）；
var html=$（li.html（）；
var按钮='删除'；
$（li）.html（“”+html+按钮+“”）；
});
});

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

在favDelete中，我使用索引

I

删除（）正确的

li

。这意味着每次删除元素时，我都需要用更新的值I重新创建所有事件

因此，我的问题是：如果我再次调用

on（）

，对于同一DOM元素上的同一事件，旧绑定会被覆盖吗？还是通过不断向列表元素添加新的

on（）

操作来创建内存泄漏

---

更新：是的，JQuery，不是Javascript。道歉。我知道我的favDelete调用不会如图所示起作用，为了提高可读性，我省略了在文章中删去一堆引号

除了硬编码索引之外，您还可以通过其他两种方法来实现这一点：

使用ID选择正确的

li

元素（在favDelete函数中）

传入一个选择器而不是索引（即

$（this）.closest（'li'）

）

---

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

$（'favoritesList'）。在（'swipleft'，'li'，function（）上{
//显示删除按钮
//或$（this.html（…）
$（this.append（'Delete'）；
}).on（'单击'，'.deleteButton'，函数（）{
//寻祖历元
var$li=$（this.closest（'li'）；
//把它递给法夫德莱特
法夫德莱特（$李）；
//如果不删除favDelete中的元素，请在此处执行：
$li.remove（）；
});

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

您可以使用

deleteButton

类的CSS规则进行的所有样式设置。您还必须更改

favDelete

方法，以接受

li

元素（或者更确切地说是带有

li

元素的jQuery对象），而不是ID和索引

---

如果我再次调用

on（）

，对于同一DOM元素上的同一事件，旧绑定会被覆盖吗

.on（）

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

---

在我上面的代码中，对于所有

li

和

button

元素只有两个事件处理程序。

如果您再次调用“on”，以前的绑定将仍然有效-例如，如果您在（'click'，function（）{console.log（'fired'）；}上调用几次（比方说5次）。当您在对象上单击一次时，它将“激发”五次。

on（）

不会覆盖。它将始终创建一个新的事件处理程序。如果要清除某些处理程序，请对所有内容使用

off（'swipeLeft'）

或只使用

off（）

。javascript具有

on（）

函数

？真是一个世界……

onclick=“favDelete（id，i）”

不会像您想的那样工作。我会创建DOM元素而不是HTML字符串，我会使用DOM遍历来查找要删除的正确

li

元素。您只需将一个事件处理程序绑定到列表即可管理它。您可以使用一个（）如果您确信您只会使用此活动一次，感谢您的帮助，这会更干净