将可拖动对象放入可排序对象后，jQuery Click 事件不起作用
Posted
技术标签:
【中文标题】将可拖动对象放入可排序对象后，jQuery Click 事件不起作用【英文标题】：jQuery Click event not working after draggable is dropped into sortable 【发布时间】：2012-12-30 08:00:31 【问题描述】：使用jQueryUI教程中提供的示例：jQuery UI Draggable + Sortable
当我将可拖动的<li> 元素拖放到可排序列表中时，它将被克隆。哪个按预期工作。然后也可以重新排序克隆元素。这也按预期工作。问题是新创建的克隆元素的“单击”事件不会触发。为了说明这一点，只需通过在函数末尾插入以下四行代码来修改 sortable.html。
$("li").on("click", function(event)
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
);
<!doctype html>
这将在每次单击<li> 元素时触发显示元素类属性的警报。但是，当单击通过将可拖动元素拖放到列表中创建的克隆元素时不会触发警报。这向我表明，在创建此克隆并将其添加到可排序列表后，不会为特定克隆触发 click 事件。实际上，似乎 click 事件已从克隆中删除，或者现有的 $("li").on("click", ... 函数无法识别它，因为它是在稍后添加到 DOM 中的。如何通过可排序列表中新创建的克隆的“单击”事件触发具有警报的相同（现有）$("li").on("click", ... 函数？非常感谢任何帮助。
更新：
这是完整的源代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
ul list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px;
li margin: 5px; padding: 5px; width: 150px;
</style>
<script>
$(function()
var cloneCache;
$( "#sortable" ).sortable(
revert: true,
);
$( ".ui-state-highlight" ).draggable(
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
);
$( "ul, li " ).disableSelection();
$("li").on("click", function(event)
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
);
);
</script>
</head>
<body>
【问题讨论】：
【参考方案1】：这是因为您仅将点击侦听器应用于现有的 li 元素。
您想使用 .on() 函数的选择器参数来动态添加这些侦听器：
替换这个：
$('li').on('click', function(event)
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
);
有了这个：
$('ul, ol').on('click', 'li', function(event)
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
);
更新 1
要将此点击侦听器应用于li 和a 和p 元素，请更改您的选择器参数：
$('ul, ol').on('click', 'li, li a, li p', function(event)
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
);
这会将侦听器应用于li 元素、a 元素（li 元素的子元素）和p 元素（li 元素的子元素）。
请注意，此侦听器将返回每个元素的类，而不是 li 类。也就是说，当点击a标签时，将返回a类，而不是li类。
另外，应用这个 jQuery on 监听器的更好方法是将它应用到 #sortable 元素：
$('#sortable').on('click', 'li, li a, li p', function(event)
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
);
【讨论】：
感谢 3dgoo。我该怎么做？我在上面的原始帖子中添加了完整的代码。你能告诉我如何调整代码以使其工作吗？谢谢。 我想我现在明白了。当我第一次阅读您的回复时，我一定错过了什么。它现在似乎起作用了。非常感谢。我一直在寻找几个小时试图弄清楚这一点。还有一个问题。如果我想将它也应用到<li> 的任何子级，例如，如果我有额外的<a> 或<p> 元素作为`' 的子级，该怎么办。谢谢。
是的。假设节点结构为<ul><li><p><a>，我如何将点击侦听器功能（在您的答案中提供）动态应用到任何新添加的<li>，包括它的所有子级。这样单击事件将通过单击<li> <p> 或<a> 来触发。谢谢。以上是关于将可拖动对象放入可排序对象后，jQuery Click 事件不起作用的主要内容，如果未能解决你的问题，请参考以下文章