javascript - 排序功能删除了 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 方法无关。旧元素及其附加的事件处理程序也被删除。您应该使用事件委托(delegate)或更好地使用 appendTo 而不是 html:

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

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

另请注意，li 元素没有 value 属性，因此 .val() 方法返回 undefined > 值(value)。您应该使用 text 方法来获取元素的 textContent 。如果 list 已经是一个 jQuery 对象，则无需使用 jQuery 构造函数包装它。