3

使用 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>
4

1 回答 1

4

这是因为您仅将点击侦听器应用于现有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

要将此点击侦听器应用到lianda和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);
});
于 2013-01-16T03:41:01.657 回答