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 ответ:
Это происходит потому, что вы применяете прослушиватель кликов только к существующим элементам
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); });