1

私の Web ページでは、順序付けられていないリスト $.get() の内容を 5 秒ごとに更新しています。問題は、リスト項目のクリック機能が機能していないことです。リスト項目は正常に更新されていますが、クリック機能に問題があります

       $(document).ready(function(){
           $(".request").click(function(){
            alert("hello");
                        //do some stuff
                      });


          window.setInterval(function() {
         $.get('/changeListItems/',function(data,status){

            //alert(data[0]);
            $('#collabRequests > li').remove();
              for(user in data)
              $('#collabRequests').append('<li class=\"request\">'+'user-'+data[user]+' wants to collaborate!'+'</li>');

            });
        },5000);   
 });


   <!-- Html snippet -->
     <div id="invitedUsers">
    <h2> List of users you have invited for this page</h2>  
    <ul id="collabRequests">        

    </ul>   
   </div>
4

3 に答える 3

5

イベントを委任する

交換

$(".request").click(function(){

と

$(document).on("click", ".request", function(){

さらに良い..ドキュメントを、イベントがバインドされた時点でページに存在する静的な祖先に置き換えます。

于 2013-07-08T19:34:46.973 に答える
1

セレクター $(".request") は一度評価されます。定期的に DOM をスキャンして、そのクラスを持つ新しい要素を見つけて、クリック ハンドラーをそれらにアタッチすることはありません。コンテンツを動的に変更しており、ハンドラーを再アタッチしていません。

于 2013-07-08T19:37:27.533 に答える
1

問題は、イベントをリッスンしている時点で DOM に存在しない要素にイベント ハンドラーを直接アタッチしようとしているということです。

Sushanth が示唆したように、動的に注入された DOM ノードでイベントを処理する最善の方法は、単純に委任することです。

もう 1 つのオプションは、新しいノードを DOM に追加するときにイベント ハンドラーをバインドすることですが、多くのノードを追加/削除する場合、これはすぐに高価になる可能性があります。また、要素が DOM ツリーから削除されるたびに、イベント ハンドラーのバインドを解除することを覚えておく必要があります。そうしないと、スクリプトがメモリ リークを引き起こす可能性があります。

于 2013-07-08T19:38:24.010 に答える