クリック（）イベントは折りたたみ可能

Question

背景のjQueryモバイルの内側に二度呼ばれています。私は動的にいくつかのjQuery Mobile Collapsiblesとその中にいくつかのコンテンツを読み込んでいます。

リンクで特定のコンテンツをクリックすると、データを保存するために作成したカスタムアトリビュートの値を保存して保存する必要があります（data-id）。

問題：私は別の折り畳み式を開くたびに、内部にこのリンクをクリックした後、クリックが、私が以前に開いdiferentsのcollapsibles数1時間PLUSと呼ばれ、その結果、エラーにつながることがあります請求を複数回呼び出す。

ここでは、より明確にするイメージです。

CODE：

$.when.apply(null, [buildTasks(curr_user)]).done(function() { 
     //make the requisition. If it's not empty, then... 
       if(!isEmpty($('#posts_dates'))){ 

        $('#pg_tasks').on("collapsibleexpand", "[data-role=collapsible]", function (e) { 

         /*Checks if the collapsible have data inside 
         a custom created attribute, data-date 
         If yes, saves this data in a variable(temp_data), 
         do the ajax requisition , empty temp_data and  empty 
         data-date, so the requisition won't be called again for this collapsible .*/ 

         if ($(this).attr('data-date') !== ''){ 

          var temp_data = $(this).attr('data-date'); 
          var temp_id = $(this).attr('id'); 


          buildTasksPosts(curr_user,temp_data,temp_id); 
          //loads the content via ajax when a  collapsible is expanded 

           temp_data = ''; 
           temp_id = ''; 
           $(this).attr('data-date',''); 


          $.when.apply(null, [buildTasksPosts() ]).done(function() { 

        /*after the requisition is done, enable a handler 
        on the current page for the links with a custom attribute data-id*/ 


          $("#pg_tasks").on("click","a[data-id]", function() { 
            var p_id = ''; 

            //THE ERROR can be seen here when I use the console 
            console.log('DATA-ID: '+ $(this).attr('data-id')); 
            p_id = $(this).attr('data-id'); 

            buildTasksDetail(p_id); 
          }); 

          }); 


         }else{ 
          console.log('AVISO:não fiz nada!!'); 
         } 



        }); 

       }//end if 

     }); 

任意のアイデア？私は本当にこれを引き起こしているか分からない。

Answer 1

問題は、折りたたみが展開されるたびにすべて"a[data-id]"子にクリックハンドラを追加することです。そのため、クリックイベントは1回発火し続けます。代わりに、各折り畳み式のcollapsibleexpand内クリックハンドラを追加するので

、あなたは一度だけそれを追加し、event delegation仕事をさせることができます。だから、できるだけ早く#pg_tasksがDOMに存在しているとして、あなたはハンドラをアタッチすることができます

$("#pg_tasks").off("click","a[data-id]").on("click","a[data-id]", function() { 
    var p_id = ''; 
    //THE ERROR can be seen here when I use the console 
    console.log('DATA-ID: '+ $(this).attr('data-id')); 
    p_id = $(this).attr('data-id'); 
    buildTasksDetail(p_id); 
}); 

イベント委任ハンドラは、ハンドラが作成された後、動的に追加されたDOM要素を一致させるために作業することができます。