0

我正在使用多页模板构建一个测试移动应用程序，但每次我从主页导航到搜索页面时，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...},对象 { type="click", origType="click", guid=537, 更多...}]

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”上。

4

1 回答 1

0

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

这里是 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 事件声明中取出即可。

于 2013-06-07T01:49:08.237 回答