Click() 事件在 Jquery Mobile collapsible 中被调用了两次

Question

背景：我正在通过 ajax 加载一些资源，使用 $.when.apply 的承诺，在完成前一个请求后执行其他请求。我正在动态加载一些 jQuery Mobile Collapsibles 和其中的一些内容。

当我点击带有 link 的特定内容时，他必须打开他的目的地并保存我创建的用于存储数据的自定义属性的值(data-id)。

问题：每次打开另一个collapsible，然后在这个link里面点击，点击调用1次PLUS 我之前打开的不同折叠件的数量，因此导致错误，即多次调用请求。

这里有一张图片更清楚：

代码：

$.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

问题在于，每次展开可折叠项时，您都会向 $("#pg_tasks") 的所有 "a[data-id]" 个子项添加点击处理程序。这就是为什么您的点击事件会持续触发一次。

您可以只添加一次并让 event delegation 工作，而不是在每个可折叠项的 collapsibleexpand 中添加点击处理程序。因此，只要 DOM 中存在 #pg_tasks，您就可以附加处理程序：

$( "#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 个在创建处理程序后动态添加的元素。

Click() 事件在 Jquery Mobile collapsible 中被调用了两次

Click() event is called twice inside Jquery Mobile collapsible

ajax

jquery

click

jquery-mobile

jquery-mobile-collapsible