1

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

$(".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 项目，而这些点击似乎没有注册。这是一个简化的小提琴，显示了我的意思。请注意原始列表项如何正常工作，但如果您添加一个，单击它没有效果。

我什至尝试了一个简单的点击警报，所以它没有收到点击事件。我需要如何更改我的代码才能使其正常工作？

4

2 回答 2

2

您的示例代码使用了一个类，并且在小提琴中，它是一个 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 中不起作用，这是你小提琴中使用的版本，你应该升级到更新的版本。

于 2013-05-05T20:51:51.857 回答
1

根据 jQuery 文档

> 事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。

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

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

根据 jQuery 文档

Deletegate() 描述：基于一组特定的根元素，将处理程序附加到现在或将来匹配选择器的所有元素的一个或多个事件。

或者您可以尝试不附加到 li 项目的单击事件，而是附加到父 ul（始终存在），然后测试目标（即单击了哪个 li）

于 2013-05-05T21:03:59.450 回答