jQuery 点击操作被排序功能剥离

Question

我有一个函数，包括以下代码：

$(list).append(item);
$(list).html(
    $(list).children("li").sort(function (a, b) {
      return $(a).val() - $(b).val();
    }));
$(item).click(this.listClick);

（基本上，它是从一个项目数组创建一个 <ul> <li>，包括一个 listClick 函数，该函数在单击任何列表项目时触发，然后根据li value).

如果我从脚本中删除 sort 函数，那么它可以正常工作（例如，列表已编译，点击功能完美运行，尽管顺序不正确）。但是，如果我对列表进行排序，它会删除点击功能（即点击项目不会执行 listClick 功能）。

为什么要删除它？在添加 listClick 行之前或之后放置排序函数似乎并不重要。

Answer 1

这可能是因为您使用的 html 方法替换了元素的 html 内容，与 sort 方法无关。旧元素及其附加的事件处理程序也被删除。您应该使用事件委托或更好地使用 appendTo 而不是 html:

 $(list).children("li").sort(function (a, b) {
      return $(a).text() - $(b).text();
 }).appendTo(list);

由于 appendTo 仅移动元素，事件处理程序被保留。

还要注意 li 元素没有 value 属性所以 .val() 方法 returns 一个 undefined 值。您应该使用 text 方法来获取元素的 textContent。如果 list 已经是一个 jQuery 对象，则不需要用 jQuery 构造函数包装它。

jQuery 点击操作被排序功能剥离

jQuery click action stripped out by sorting function

javascript

jquery

sorting

onclicklistener