jQuery Click событие не работает после перетаскивания в сортируемый


Используя пример, приведенный в учебнике jQueryUI: jQuery UI Draggable + Sortable

Когда я перетаскиваю перетаскиваемый элемент <li> в сортируемый список, он будет клонирован. Который работает, как и ожидалось. Затем элемент clone также может быть повторно отсортирован. Это также работает, как и ожидалось. Проблема в том, что событие" click " вновь созданного клонированного элемента не срабатывает. Чтобы проиллюстрировать это, просто измените сортировку.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", ... с предупреждением через событие" 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 3

1 ответ:

Это происходит потому, что вы применяете прослушиватель кликов только к существующим элементам li.

Вы хотите использовать параметр selector для .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);
});