首页 文章

在draggable被放入可排序后，jQuery Click事件无法正常工作

提问于
浏览 次
3

使用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> 元素时，这将触发显示元素类属性的警报 . 但是，单击通过将可拖动元素拖放到列表中而创建的克隆元素时，不会触发警报 . 这表明在创建此克隆并将其添加到可排序列表后，不会针对特定克隆触发click事件 . 实际上似乎已经从克隆中删除了click事件，或者现有的 $("li").on("click", ... 函数无法识别它，因为它稍后被添加到DOM中 . 如何通过"click"事件为可排序列表中新创建的克隆触发相同（现有） $("li").on("click", ... 函数和警报？很感谢任何形式的帮助 .

Update:

这是完整的源代码：

<!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>
jquery events clone draggable jquery-ui-sortable

1 回答

  • 4

    这是因为您只将点击侦听器应用于现有的 li 元素 .

    您希望使用.on()函数的selector参数动态添加这些侦听器：

    替换这个：

    $('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);
});

    Update 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);
});
    回复于

相关问题