3

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>
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ます。

また、この jQueryonリスナーを適用するより良い方法は、#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 に答える