Question

我正在使用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页 - ＆gt;第3页（一个警报） - ＆gt;第1页 - ＆gt;第3页（两个警报）....

我试图检查在firebug控制台上是否有多个元素执行$('#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>....

delegation.js

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

Answer 1

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

试试这个：

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

或将on替换为one以执行一次;

JQuery Mobile多次执行委托

1 个答案: