0

jQuery フォーマットを利用するユーザー インターフェイス リストを作成しようとしています。ユーザーは、入力フィールドと追加ボタンを使用してリストに追加し、並べ替え機能を使用してリストを並べ替えることができます。また、ダブルクリックしてリストからアイテムを削除できる必要があります。ただし、ダブルクリックによる削除は、たとえば html に入力した元の ol li アイテムに対してのみ機能します。jQuery に追加した li オブジェクトが、何らかの理由でダブルクリックしても削除されません。誰かが理由を知っていますか？

以下のコードの抜粋

$(document).ready(function () {
    $('ol').sortable();
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<li>' + toAdd + '</div>');
    });
    $("li").dblclick(function () {
        $(this).remove();
    });
    $(document).on('.dblclick', 'li', function () {
        $(this).remove();
    });
});
4

2 に答える 2

0 
$(".list").on('dblclick', 'li',function () {  
   $(this).remove();
});
于 2013-03-27T19:16:23.103 に答える
0

さて、2 つの問題があります (ライブの例を使用して、以下で解決します)。

このコード:

$("li").dblclick(function () {
    $(this).remove();
});

dblclick...実行時に存在する要素にのみイベントをフックします。したがって、後で追加する要素には接続しません。

このコード:

$(document).on('.dblclick', 'li', function () {
    $(this).remove();
});

...イベント委譲を介してそれを処理しようと.しますが、それを先導するべきではありません.dblclick。

したがって（より通常のコード/インデントスタイルを使用）：

$(document).ready(function () {
    $('ol').sortable();

    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();

        $('.list').append('<li>' + toAdd + '</div>');
    });

    $(document).on('dblclick', 'li', function () {
        $(this).remove();
    });
});

実例| ソース

私がそこで行ったのは、動的に追加された要素では機能しないため、上記の最初の項目を削除し、2 番目の項目を修正しました (を削除しました.)。

于 2013-03-27T19:17:40.670 に答える