1

場合：

私は新しい jQuery フォト ギャラリーに取り組んでいます。現在、私は 3 つの異なるライブラリをマージし、ギャラリーの機能を拡張するカスタム コードをいくつか書いています。しかし、私は過去 2 時間このスクリプトに行き詰まっており、方法が思いつきませんでした。

ライブラリの 1 つに、マークアップを追加するスクリプトがありますbody。これが追加されたマークアップです。

<div class='custom' data-oid=1>
    <div class='page-link' data-attr=1>Page Link</div>
    <div class='page-link' data-attr=2>Page Link</div>
</div>
<div class='custom' data-oid=2>
    <div class='page-link' data-attr=1>Page Link</div>
    <div class='page-link' data-attr=2>Page Link</div>
</div>

clickクラスのイベントをリッスンしてpage-link、他のライブラリでいくつかの変更を実行したいと考えています。追加されたマークアップは動的であるため、次のスクリプトを使用してイベントをキャッチしclickます。

$(document).on('click', '.page-link', function () {
    //Print value of parent data attribute
    alert($(this).parent().attr('data-oid'));
});

問題：

それは正しく動作するはずです。しかし問題は、マークアップを追加したライブラリもclickイベントをリッスンしていることです。ライブラリをクリックするとpage-link、クリックした要素が別の要素に置き換えられます。このため、クリックされた要素はそのスコープとともに失われ.parent()、私のコードでは親を取得できません。

私の質問はdata-oid、スコープが失われた後でも親の属性の値を取得する方法はありますか?

jsフィドル

よろしく。

4

1 に答える 1

0

イベントがバブルするとき、クリック ハンドラーを親にアタッチし、ターゲットが であるかどうかを独自にチェックできます.page-link。

$(document).on('click', '.custom', function (e) {
    if ($(e.target).hasClass('page-link')) {
        $(e.target).replaceWith('<h2>Link Modified</h2>');
        alert( $(this).attr('data-oid') );
    }
});

フィドル

于 2013-04-02T13:53:22.197 に答える