0

我正在使用 jQuery Mobile 创建一个网站，其中包含不同 html 文件中的多个页面。在一个文件中，我有这个 DIV：

<div data-role="page" id="page3" style="overflow-x: hidden !important;">
 <div data-role="content">...
 </div>
</div>

我在第一页的标题中定义了一个委托：

$(document).delegate('[id="page3"]', 'pageshow', function () {
    alert('page3');
};

问题是该委托在第一次加载页面时被触发，第二次被触发两次，等等......每次您访问该页面时，委托被触发一次。

过程是这样的：

访问第1页->第3页（一个警报）->第1页->第3页（两个警报）....

$('#page3')我试图检查在萤火虫控制台上是否有多个具有该 ID 的元素正在执行，但我只得到一个项目。

我不确定我还能检查什么来调试问题。

编辑：

page1.html

<html>
    <head>
        <script type="text/javascript" src="assets/js/delegation.js"></script>   
        <script type="text/javascript">
           delegation.delegate3()
        </script>  
    </head>
    <body> ....

page3.html

<html>
    <head>
        <script type="text/javascript" src="assets/js/delegation.js"></script>     
    </head>
    <body> 
       <div data-role="page" id="page3" style="overflow-x: hidden !important;">
          <div data-role="content">...
           </div>
       </div>....

委托.js

var delegation = (function () {
  return {
     delegate3:function delegate3() {
    $(document).delegate('[id="page3"]', 'pageshow', function () {
           alert('page3');
         };
   }
 })();
4

1 回答 1

0

您的页面每次都会重建，因此它会找到另一个页面并在新旧页面上执行事件。

尝试这个：

$(document).on("pageshow", "#page3", function () {
    alert('page3');
};

或替换on为one执行一次；

于 2012-10-26T07:17:17.320 回答