Question

我正在使用多页模板构建测试移动应用程序，但每当我从主页面导航到搜索页面时，JQM会在同一对象上逐步注册相同的事件。

如果我在主页面并导航到搜索页面，那么第一次1 onclick事件附加到UL中的“li a”，但如果我再次使用标准JQM返回主页面返回按钮并再次单击搜索页面，在UL中的每个“li a”上注册的2个事件完全相同。如果我第三次这样做有3个，依此类推......

相关搜索页面标记：

<div id="searchResults">
    <ul id="catResult" class="ui-listview" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="listdivider" data-theme="b">Search Categories</li>
    </ul>
</div>

搜索页面的JQM代码：

$('body').on('pagebeforeshow', '#searchPage', function(event){ // check if page is shown then execute code
    setScrollBar("show");
    buildCategoryList();
    setListMenuHeight(".ui-2col-layout .ui-2column-grid .ui-block-a", wHeight);

   // This event register is being registered multiple times
   $('#catList').on('click', 'li a', function(){
       var href = $(this).attr('href');
       var id = href.split('=');
       console.log('spLoadCategoryResults('+id[1]+')');
       spLoadCategoryResults(id[1]); // return results from database
    });    

    $("[data-rel=back]").click(function(){
                    // removes appended elements from the DOM is they exist
        cleanPage(['#catResult li','#locationMap #mapCanvas','#searchResults #spResult']); 
    });

    // DEBUG - shows how many times the event is registered
    var data = jQuery._data( catList, "events" );
    console.log(data);      

});

调试结果：

点击 [Object {type =“click”，origType =“click”，guid = 306，more ...}，Object {type =“click”，origType =“click”，guid = 469，more ...}，Object {type =“click”，origType =“click”，guid = 537，more ...}]

0
    Object { type="click", origType="click", guid=306, more...}

1
    Object { type="click", origType="click", guid=469, more...}

2
    Object { type="click", origType="click", guid=537, more...}

delegateCount
    3

remove
    [Object { type="remove", origType="remove", guid=210, more...}]

其中每一项都在“li a”上注册。

Answer 1

我认为这与此代码有关。每次导航到搜索页面时，您都会将另一个点击事件附加到锚点项目。

这是jsfiddle演示http://jsfiddle.net/d2Jzb/

// This event register is being registered multiple times
 $('#catList').on('click', 'li a', function(){
   var href = $(this).attr('href');
   var id = href.split('=');
   console.log('spLoadCategoryResults('+id[1]+')');
   spLoadCategoryResults(id[1]); // return results from database
});

该点击事件似乎与pagebeforeshow事件中发生的任何事件无关。只需从pagebeforeshow事件声明中获取事件声明即可。

JQM在同一对象上多次注册相同

1 个答案: