web-dev-qa-db-ja.com

jQuery .on（）メソッドに新しい要素が表示されない

私はJSON要素を取得し、そのようなアイテムからリストを作成しています：

getTitles: function(data) {
    data = data || {};
    var list = [];

    $.getJSON(
        '/titles',
        data,
        function(data) {
            $.each(data.data, function(key, val) {
                list.Push(
                    '<li><a href="'+ val.href +'">'+ val.title +'</a><span class="count">'+ val.count +'</span></li>'
                )
            });

            $('#title-items').html(list.join(''));
        }
    );
}

そして、次のようなa要素のクリックイベントをバインドしています。

$('a').on('click', function(e) {
    alert('clicked');
    e.preventDefault();
});

古いa要素はアラートを表示しますが、新しい要素はURLに従います。新しいイベントハンドラーは機能しません。どうすれば解決できますか？

javascriptjqueryevent-handlingclickjquery-events
46
cnkt

live機能を取得するために正しいコードを使用していません。

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});
  1. まず、共通の祖先要素（#title-itemsこの例では）。 alldocument要素を処理する場合は、ここでもaを使用できます。
  2. イベントタイプ（on）、thenサブセレクター（a）、イベントのコールバック関数を渡します。

これで、clickイベントが#title-items、要素がa要素かどうかを確認し、そうであればコールバックを起動します。

132
alex

イベントの委任を使用して、任意の時点でDOMに存在するイベントでトリガーされたイベントをキャプチャします。

$(<root element>).on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

[〜＃〜] update [〜＃〜]-この例では、<root element>は、バインド時にDOMに存在する、バインド先のリンクの祖先です。

基本的な考え方は、まだDOMにないDOM要素にイベントハンドラーを接続できないため、先祖要素にイベントハンドラーを接続し、イベントが先祖要素にバブルアップするのを待つというものです。イベントが先祖イベントに到達すると、event.targetプロパティをチェックして、元々クリックされていた要素を確認します。

13
Jasper

arrive.js ライブラリを使用できます（内部で MutationObserver を使用します）。

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});
0
Uzair Farooq