3

アンダースコアを使用していくつかの要素を作成し、それらを jQuery で div に追加しています。

.on()ページの下部では、要素のクリックに応答するためにjQuery を使用しています。

$('.pickup').on('click',
    function(e) {
        alert("hello");
    }
);

ユーザー インタラクション (Google マップ) を介して、div にさらに要素を追加し、クリックにも応答するようにする必要があります。何らかの理由で、そうではありません。私はjsfiddleでそれをすべて切り詰めました:

http://jsfiddle.net/thunderrabbit/3GvPX/

alert('hello')ページが読み込まれると、出力の行をクリックするとjQueryが使用されることに注意してください。

しかし、[追加] ボタンをクリックすると、新しい行はクリックに反応しません。

私のHTML

<div id="unit_2225" class="pickup">
    <span>Click me; I was here first</span>
</div>
<script type="text/template" id="unit-template">
    <div class="unit-item">
        <span class="pickup">
            <span>click us (<%= unit_id %>) via underscore</span>
        </span>
    </div>
</script>
<div id="divID">
</div>
<button>add</button>

私のJavascript

var addUnitToDiv = function(key,val) {
    console.log(val);
    var template = _.template($('#unit-template').html(),val);
    $('#divID').append(template);
}

var unit_ids = [{unit_id:'hello'},
                {unit_id:'click'},
                {unit_id:'us'},
                {unit_id:'too'},
                {unit_id:112}];

$.each(unit_ids, addUnitToDiv);

var unit_pids = [{unit_id:'we'},
                 {unit_id:'wont'},
                 {unit_id:'respond'},
                 {unit_id:'to'},
                 {unit_id:'clicks'},
                 {unit_id:358}];

createMore = function() {
    $.each(unit_pids, addUnitToDiv);
}

$('.pickup').on('click','span',function() {
    alert("hello");
});

$('button').click(createMore);

同様の質問を見つけましたが、ここでその回答を適用する方法がわかりませんでした。

4

2 に答える 2

12

イベントを要素に直接バインドする代わりに、1 つのイベントをコンテナー要素にバインドし、それをデリゲートします。

$("#divID").on("click", ".pickup", function () {
    // Your event handler code
});

デモ: http://jsfiddle.net/3GvPX/3/


この場合、イベント ハンドラーは、クラス "pickup" を持つコンテナー内の要素に対してのみ実行されます#divID

あなたのシナリオでは、要素はid「divID」の要素に追加されています。したがって、2 つのセレクターの由来は次のとおりです。

お気づきのように、要素を動的に追加してもイベント ハンドラーが魔法のようにバインドされないため、これは便利です。で通常バインドされているイベント ハンドラーは、バインド時に.on()存在するイベント ハンドラーに対してのみ実行 (バインド) されます。

DOM が最初にタグ名でフィルタリングされるように、委譲セレクターを (テンプレートで"span.pickup"要素が常に like であることがわかっている場合)に変更すると、さらに役立つ可能性があります。<span>


参照:

于 2013-04-25T05:00:37.120 に答える
3

実際のデモ http://jsfiddle.net/u2KjJ/

http://api.jquery.com/on/

.on() メソッドは、jQuery オブジェクトで現在選択されている要素のセットにイベント ハンドラーをアタッチします。ドキュメント レベルでハンドラーをアタッチできます。

それがニーズに合うことを願って、:)

コードは以下に変更されたコードを試してください

$(document).on('click','.pickup',function() {
    alert("hello");
});
于 2013-04-25T05:02:03.230 に答える