9

これは、ブートストラップ ボタンのドロップダウン タイトルで選択した項目を表示する方法に似てい ます。

唯一の違いは、私のドロップダウンリストは静的ではなく、ajax 応答によって入力されることです。以下のコードは、動的に入力されるアイテムに対してのみ機能しません。 <li>

<li>上記のテストでは、そのアイテムをクリックしたときに意図的に静的を配置しました。コンソールに成功メッセージが表示されます。しかし、<li>動的に追加されたものをクリックすると、コンソールに何も表示されません。

ここで欠けている jQuery の基本的な知識がいくつかあると思います。jQueryの達人、コメント/考え?

さらに明確にするためのコードを次に示します。

Java スクリプト コード:

選択したオプションをコンソールに出力する

$(".dropdown-menu li a").click(function () {
        console.log("Selected Option:"+$(this).text());
});

ajax JSON 応答からのドロップダウンの入力

$.each(response, function (key, value) {
    $("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>");
})

HTML コード:

<div class="dropdown btn">
    <div id="dropDownId" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#">
        Collections
        <b class="caret"></b>
    </div>           
    <ul id="dropDownUL"  class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#" align="left">Static test Option</a></li>
    </ul>


</div>

したがって、もう一度クリックするStatic test Optionと、コンソールにメッセージが表示されます。Selected Option: Static test Option

しかし、Option2 Option 3ajax 応答から入力されたものをクリックすると、コンソールに何も表示されません。

不明な点があればお知らせください。さらに説明してみます。

4

1 に答える 1

19 
$(document).on('click', '.dropdown-menu li a', function () {
    console.log("Selected Option:"+$(this).text());
});

これは単純なイベント委任です...ページの読み込み時に存在しない要素は、ページの読み込み時に存在する静的な親要素にイベントを委任する必要があります。

これを完了するために、jQuery の .on() を活用します。

  $(staticElement).on(event, dynamicElement, function(){ //etc });

必須の編集

実際に要素を にバインドせず$(document)、代わりに最も近い静的な親要素を選択してください。これはパフォーマンス上の理由によるものです。

于 2013-04-12T19:34:10.283 に答える