jQueryUI チュートリアルで提供されている例を使用する: jQuery UI Draggable + Sortable
<li>
ドラッグ可能な要素を並べ替え可能なリストにドラッグ アンド ドロップすると、クローンが作成されます。これは期待どおりに機能しています。その後、クローン要素を再ソートすることもできます。これも期待どおりに機能しています。問題は、新しく作成されたクローン要素の「クリック」イベントが発生しないことです。これを説明するには、次の 4 行のコードを関数の最後に挿入して、sortable.html を変更します。
$("li").on("click", function(event){
var clicked_element_class = $(this).attr('class');
alert(clicked_element_class);
});
<!doctype html>
<li>
これにより、要素がクリックされるたびに、要素のクラス属性を示すアラートがトリガーされます。ただし、ドラッグ可能な要素をリストにドラッグ アンド ドロップして作成されたクローン要素をクリックしても、アラートはトリガーされません。これは、このクローンが作成され、並べ替え可能なリストに追加された後、特定のクローンに対してクリック イベントが発生しないことを示しています。実際には、クローンからクリック イベントが削除されているか$("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>