使用jQueryUI教程中提供的示例：jQuery UI Draggable + Sortable
当我将可拖动的<li>元素拖放到可排序列表中时，它将被克隆。哪个按预期工作。然后，克隆元素也可以重新排序。这也按预期工作。问题是新创建的克隆元素的“ click”事件不会触发。为了说明这一点，只需在函数末尾插入以下四行代码，即可修改sortable.html。
$("li").on("click", function(event){
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
});
<!doctype html>
每次单击
<li>元素时，都会触发警报，显示该元素的class属性。但是，单击通过将可拖动元素拖放到列表中而创建的克隆元素时，不会触发警报。这向我显示，在创建特定克隆并将其添加到可排序列表后，不会触发该特定克隆的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>
最佳答案
这是因为您仅将点击侦听器应用于现有的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);
});