0

要素を追加および削除できる単純なリストを作成しようとしています。今のところ、リスト要素オブジェクト（既存および追加）のそれぞれに簡単なアクションを追加して実行することに取り組んでいます。残念ながら、私はそれでいくつかの困難に遭遇しました。最初に作成されたオブジェクトは変更できますが、「Web ページの作業」中に追加されたオブジェクトは変更できません。

まず私の考えは、これに AJAX を追加することでしたが、それが最も簡単な方法だとは思いません。

少し前に（どこで覚えていないのか）、この作業を行う方法を読んだと思いますが、今はわかりません。誰かがこれについて私を助けてくれるか、少なくともこれについての良い説明へのリンクを提供してくれたら本当にうれしいです.

私がこれまでに行ったことは次のとおりです（これはほとんど単なるスクラッチですが、主なアイデアはそこにあります）：http://jsfiddle.net/sebap123/pAZ7H/0

$("li").click(function() {
    $(this).text("new text");
});
$("#addButton").click(function() {
    $(".list").append(
    $('<li>').append($('<span>').append("added li")));
});​

すべての応答に感謝します。

4

2 に答える 2

3

on()次のメソッドで event-delegation を使用するだけです。

$("ul").on('click','li', function() {
    $(this).text("OK");
});

JS フィドルのデモ。

あなたが経験していた問題は、jQuery がイベントを既に存在する要素 (イベント バインディングの時点で存在する) にのみ直接バインドできることです。このon()アプローチは、新しいコンテンツが追加された要素 (または新しく追加された要素の祖先要素) にアクションをバインドし、リッスンするイベント (スペースで区切られたイベントのリスト) を識別し、セレクター ( )'click'に一致します。liその後、関数は必要なアクションを実行します。

jQuery 1.7 (またはそれ以降)on()を使用している場合は、代わりに jQuery < 1.7 のバージョンをdelegate()使用する必要があります (これは多かれ少なかれ同じことを行いますが、イベントリストとセレクターパラメーターを逆にします):

$("ul").delegate('li', 'click', function() {
    $(this).text("OK");
});

JS フィドルのデモ。

参考文献:

于 2012-09-28T21:36:08.900 に答える
0

ここでイベント委任を使用する必要があります..これを試してください

$("ul").on('click' , 'li', function() {
    $(this).text("OK");
});

前のクリック イベントの問題は、イベントがページ上の現在の要素にのみ関連付けられることです。

ただし、新しい要素を作成すると、その要素にイベントは関連付けられません。

ここには 2 つのオプションがあります。イベントリスナーを要素の祖先に追加します..

または、要素が作成されたらイベントを追加します。

2回目のアプローチ

var clickEvent = function() {
    $('li').unbind().on('click', function() {
        $(this).text("OK");
    });
}

clickEvent();

$("#addButton").click(function() {
    $(".list").append(
    $('<li>').append($('<span>').append("Press me - I am new!")));
    clickEvent();
});​

2 番目のアプローチでは、新しい要素が追加されると、新しいイベントをバインド解除してすべての要素にバインドします。

イベントのバインドと再バインドは不適切な設計パターンです

フィドル

第二のアプローチ

于 2012-09-28T21:41:41.460 に答える