Question

我通过搜索重新排序列表项的好方法找到了这里。

$(".reOrder li").click(function() {
       var index = $(".reOrder li").index(this);
       if (index != 0) {
          // li item is not sitting in the first position
          $(".reOrder li:eq(" + (index - 1) + ")").before(this);
       }
       });

问题是，我有通过jQuery的append方法添加到UL的LI项目，并且点击似乎没有为那些注册。 Here's a simplified fiddle showing what I mean。请注意原始列表项如何正常工作，但如果添加一个，则单击该项无效。

我甚至尝试过一个简单的点击提醒，因此它没有获得点击事件。我如何更改代码才能使其正常工作？

Answer 1

你的示例代码使用了一个类，而在小提琴中，它是一个ID，但我猜你知道。

事件处理程序（如代码中的处理程序）仅适用于绑定事件时页面上存在的元素。添加元素时，这些元素将是动态的，您需要一个委托事件处理程序，其中事件绑定到非动态父级，并检查第二个选择器，在本例中为li：

$(".reOrder").on('click', 'li', function() {
     var index = $(".reOrder li").index(this);
     if (index != 0) {
        // li item is not sitting in the first position
        $(".reOrder li:eq(" + (index - 1) + ")").before(this);
     }
});

这不适用于jQuery 1.4，这是你小提琴中使用的版本，你应该升级到更新的版本。

Answer 2

根据jQuery文档

> Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

并且还要尊重你在小提琴上使用的jQuery版本（1.4.2无论如何都没有.on（））。最好是使用委托

http://api.jquery.com/delegate/

根据jQuery文档

Deletegate（）描述：为一个或多个事件附加处理程序根据a，现在或将来与选择器匹配的所有元素具体的根元素集。

或者你可以尝试而不是附加到li项的click事件，附加到父ul（总是在那里），然后测试目标（即点击了哪个li）

JQuery：如何重新排序jquery添加的列表项？

2 个答案: