动态创建的 UL 的 jQuery 单击事件处理程序不起作用答案

【问题标题】：jQuery click event handler for dynamically created UL is not working动态创建的 UL 的 jQuery 单击事件处理程序不起作用
【发布时间】：2014-03-02 19:06:15
【问题描述】：

我有带有 jQuery 连接排序功能的 UL 列表，试图通过多个项目选择和拖动来实现连接排序。

在我的页面中，用户可以动态创建 UL 列表，我正在 DIV 控件中创建动态 UL 列表。在 document.ready() 函数中，我将单击事件处理程序附加到 UL 控件。但是这个处理程序没有附加到在 DIV 中创建的 UL 控件。为什么？

我也附上了 Fiddle 示例。

任何帮助

Fiddle: http://jsfiddle.net/EN2P5/2/

【问题讨论】：

如果你想包含一个指向 JSfiddle 的链接，你还必须显示一些代码。
是的，我添加了 JSFiddle 链接
这个想法是，除了 JSFiddle 链接之外，您至少还要发布一些代码。 Stack Overflow 是一种长期资源，因此在此处发布代码是当务之急。
我在 JSFiddle 中添加了一个完整的示例代码。请让我知道您还需要添加什么。

标签： jquery jquery-ui

【解决方案1】：

您可以尝试使用 .live() 方法，因为存在 .on() 函数，所以现在使用这种方法：

$(document).on('click', 'ul li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
})

http://jsfiddle.net/EN2P5/8/

【讨论】：

感谢您的回答！更改后，选择有效，但可排序功能无效。
我更新了 fiddleJs，没有看到列表有可排序的事件：P
然后你可以创建一个你拖动逻辑的函数并将它影响到你新创建的<ul>。 JsFiddle 更新

【解决方案2】：

绑定生成的 DOM 元素时需要使用on函数。

$("ul").on("click", function(){
   console.log("click");
});

您也可以使用bind、delegate。

【讨论】：

实际上，我相信.on 是当今使用的正确处理程序
它不工作。唯一的问题是单击事件不适用于在 DIV 内创建的控件。我同意 Collin，我们必须使用 .on 作为最新的 jQuery 版本。