Question

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

当我点击带有链接的特定内容时，他必须打开目的地并保存我创建的自定义属性值以存储数据（data-id）。

问题：每次我打开另一个可折叠的，然后点击此链接里面，点击被称为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]"的所有$("#pg_tasks")子项添加点击处理程序。这就是为什么你的点击事件会继续发射一次。

您可以只添加一次，然后让 event delegation 工作，而不是在每个可折叠的collapsibleexpand中添加点击处理程序。因此，只要#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元素。

在Jquery Mobile可折叠

1 个答案: