0

私はとの対話を持っています

<ul id="suggestions0">
    <li id="suggestion0-0" class="suggestion">BLO</li>
    <li id="suggestion0-1" class="suggestion">BLU</li>
    <li id="suggestion0-2" class="suggestion">BLL</li>
    <li id="suggestion0-3" class="suggestion">BOO</li>
    <li id="suggestion0-4" class="suggestion">CLA</li>
</ul>

コンテンツを動的に置き換えたい。

これでulコンテンツに変更

        $("#suggestions0").html("<li id='test0-1' class='suggestion'>BLO</li><li id='test0-2' class='suggestion'>BLO</li><li id='test0-3' class='suggestion'>BLO</li><li id='test0-4' class='suggestion'>BLO</li><li id='test0-5' class='suggestion'>BLO</li><li id='test0-6' class='suggestion'>BLO</li>");

私が欲しいのは、これらの単語の 1 つをクリックしたときに、何かをしたいということです。アラートを想定してください。

私はこれをやろうとします

$(".suggestion").on("click", function() {
    alert(this.id);
});

しかし、アラートは表示されません。

ここに問題を示すサンプル http://jsfiddle.net/survivant/cyFxp/1/

サンプルでは、​​OKをクリックしてもコンテンツに変化しないので、LIをクリックすると動作しますが、NOTOKをクリックするとイベントを受け取れません。

私はjQuery 1.7+を使用しています.ライブAPIは非推奨または削除されています.APIはon()を使用することを提案しています.

4

5 に答える 5

3

on正しく使用していません。live特定のセレクターから発生するイベントをリッスンするためにイベント ハンドラーをドキュメントにバインドするために使用されますが、onon を明示的に呼び出すことで.suggestion、既存の候補にのみリスナーをアタッチします。したがってon、常に存在する要素にバインドするために使用し、動的に作成される要素を選択するセレクタを渡す必要があります。

// With live like this:
$('.suggestion').live('click', ...

// Is equivalent to this:
$(document).on('click', '.suggestion', ...

// Not this:
$('.suggestion').on('click', ...

onあなたの場合、 をベースにするのではなくdocument、 を使用できますul。

$("#suggestions0").on('click', '.suggestion', function(){
  alert(this.id);
});
于 2013-04-08T02:08:07.813 に答える
1

以下のスクリプトは、ページに現在存在する DOM にのみクリック イベントをバインドします。

$(".suggestion").on("click", function() {
    alert(this.id);
});

ページで作成されるすべての DOM にクリック イベントをバインドします。代わりにイベントをバインドしdocumentます。

$(document).on("click", ".suggestion", function() {
    alert(this.id);
});

コードについては、フィドラーを参照してください。

于 2013-04-08T02:27:20.133 に答える
1

私は解決策を見つけましたが、それが最善の解決策かどうかはわかりませんが、うまくいくようです。

$("#suggestions").on("click","li", function() {
    alert(this.id);
});
于 2013-04-08T02:10:14.450 に答える
0

セレクターを渡すon()と、古いものと同じように動作しlive()ます:

$("#suggestions0").on("click", ".suggestion", function () { alert(this.id); });

更新されたフィドルを参照してください: http://jsfiddle.net/cyFxp/2/

于 2013-04-08T02:09:14.197 に答える