2

以下はコードの 2 つのスニペットです。何らかの理由で何も起きていませんが、同じ JS ファイルの他の jQuery 関数が UL のあるページで正常に実行されています。

<ul id="activityPaganation" class="paganation">
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
</ul>



$(document).ready(function() { 
    $('#activityPaganation li a').on("click", function(e) {
            e.preventDefault();     
            var pid = $(this).text();

            alert(pid);
    });
});
4

2 に答える 2

8

これはDOMに動的に追加されるため、イベント委任を使用できます。

 $(document).on("click", "#activityPaganation li a", function(e) {
            e.preventDefault();     
            var pid = $(this).text();

            alert(pid);
    });

ドキュメントの代わりに、いつでもDOMに存在するコンテナを使用してください。

li が追加され、ul #activityPaganationいつでも存在する場合:

  $('#activityPaganation').on("click", "li a", function(e) {
                e.preventDefault();     
                var pid = $(this).text();

                alert(pid);
        });

それ以外の場合は、イベント バインディングをロードのcompleteコールバックに移動します。

すなわち

$('something').load('someurl', function(){
 $('#activityPaganation li a').on("click", function(e) {
            e.preventDefault();     
            var pid = $(this).text();

            alert(pid);
    });
});

その理由は、DOM に存在する必要がある要素に直接イベント バインディングを使用するためです。代わりに、回避策として、任意の時点またはドキュメント ヘッドで DOM に存在するコンテナーにイベントを委任し、将来要素が追加されたときにイベントを取得できるようにします。親から委任されました。この効果には、効果的にイベント バブリングを使用します。

見る

于 2013-07-10T21:40:18.673 に答える
3

代わりにイベント委任を試してください

交換

$('#activityPaganation li a').on("click", function(e) {

と

$(document).on("click", '#activityPaganation li a', function(e) {

要素はページに動的に追加されるため、イベントは追加される要素にバインドされません。

DOMあなたがしようとしているイベント署名は、その時点で存在する要素にのみイベントをバインドします。したがって、イベントを最も近い静的祖先に委任すると、イベントがバブルアップして処理されるため、問題が解決します。

于 2013-07-10T21:40:21.577 に答える