Jquery 모바일 페이지 쇼 이벤트 2 번 실행

현재 모바일 사이트를 구축하고 있으며 사용자 정의 JQuery 위젯을 통합하는 데 문제가 있습니다. 어떤 이유로 페이지 표시 이벤트가 먼저로드되는 페이지에 대해 두 번 실행됩니다. 내가 페이지로 이동,로드 페이지 하나의 제 다시 두 개의 HTML 페이지Jquery 모바일 페이지 쇼 이벤트 2 번 실행

페이지 1

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>One</title> 

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
    }); 
    </script> 
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script> 

</head> 
<body id="default"> 
    <div data-role="page" id="content-one"> 
     <div role="main" class="ui-content" id="one-content"> 
      One<br/> 
      <a href="two.html">back to two</a> 
     </div> 
     <script type="text/javascript"> 
     (function($, undefined) { 
      $.widget("test.stuff", { 
       _create : function() { 
        console.log("create"); 
       }, 
       _init : function() { 
        console.log("_init"); 
       }, 
       destroy: function() { 
        this.element.empty(); 
        $.Widget.prototype.destroy.call(this); 
       } 
      }); 
     })(jQuery); 
     </script> 
     <script type="text/javascript"> 
     $(document).on("pageshow", "#content-one", function() { 
      console.log("pageshow1"); 
      $("#content-one").stuff({}); 
     }); 
     $(document).on("pagebeforeshow", "#content-one", function() { 
      console.log("pagebeforeshow1"); 
     }); 
     </script> 
    </div> 
</body> 
</html>

2 페이지

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>Two</title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script> 
    <script type="text/javascript"> 
    $(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
    }); 
    </script> 
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script> 

</head> 
<body id="default"> 
    <div data-role="page" id="content-two"> 
     <div role="main" class="ui-content"> 
      Two<br/> 
      <a href="one.html">back to one</a> 
     </div> 
     <script type="text/javascript"> 
     $(document).on("pageshow", "#content-two", function() { 
      console.log("pageshow2"); 
     }); 
     $(document).on("pagebeforeshow", "#content-two", function() { 
      console.log("pagebeforeshow2"); 
     }); 
     </script> 
    </div> 
</body> 
</html>

을 만들었습니다 이해의 용이성을 위해

2 개는 링크를 사용하고, 1 개는 링크를 사용하여 탐색합니다.

페이지 1을 다시로드하면 pageshow 이벤트가 두 번 발생합니다. 내 페이지에 대한 동적 콘텐츠가 있고 캐시 된 페이지를 제공 할 수 없기 때문에 reloadPage를 true로 설정했습니다.

나는 이벤트를 잘못 사용할 수 있습니다.

출처

2014-01-24 mfleshman

'reloadPage'는 더 이상 사용되지 않으며 _option_으로 더 이상 설정할 수 없습니다. 대신 페이지를로드하고 프로그래밍 방식으로 다시로드하려면'$ .mobile.pageContainer.pagecontainer ("change", "page.html", {reload : true});를 사용하십시오. 또한,'pageshow'는 더 이상 사용되지 않지만 여전히 작동합니다.'$ (document) .on ("pagecontainershow", function() {code});'을 사용하십시오. – Omar

reloadPage를 사용하지 않아야 할 때마다 각 페이지가로드 될 때마다 캐시에서 꺼내지 않는 메커니즘은 무엇입니까? 나는 이것이 모든 탐색을위한 기본 기능이되기를 바랍니다. – mfleshman

'reloadPage' 대신'reload' 명령을 사용하십시오. – Omar

$(document).on("pageshow",...)을 $(document).one("pageshow", ...)으로 바꾸어보십시오.이 경우 이벤트는 하나의 전화 http://api.jquery.com/one/으로 제한됩니다.

문제는 인라인 스크립트에서 on을 사용하면 페이지가로드 될 때마다 새 이벤트가 만들어집니다. 따라서 처음 페이지를로드하면 인라인 스크립트가 실행되고 pageshow 이벤트가 트리거됩니다. 두 번째로 새 이벤트가 다시 트리거되지만 첫 번째 이벤트는 여전히 콘텐츠를 듣고 있습니다 (한 페이지 씩보기). 사실, 프로세스를 반복하면 로그에 3, 4, ... 시간이 표시됩니다.

또 다른 옵션은 $(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...)에 필요한 모든 트리거를 설정하는 스크립트를 헤드 섹션에 만들 수 있습니다. 이 경우 스크립트는 한 번만 초기화되므로 제대로 작동합니다.

출처

2014-03-21 00:10:52 gfg

약 2 시간 동안 여기와 다른 사이트의 모든 수정 작업을 시도했습니다. 나는 포기하고, 숨기기 이벤트 페이지를 제거과 같이 다시

var hasDownload = false; 
$(document).on("pageinit", "#mypage",function(event){ 
    if (hasDownload === false) { 
     hasDownload = true; 
     // do some work 
    } 
);

출처

2014-08-01 03:06:04 Gplex314159

시도를 발사 것을 방지하기 위해 자신의 if 문을 넣어 :

$(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
     $(docuement).on('pagehide', function (event, ui) { 
      $(event.target).remove(); 
     }); 
    });

Remenber 사용하지 않도록하지 않으면 그 ajax, 모든 요청은 AJAX와 함께 수행됩니다.

출처

2015-07-25 14:52:07

Jquery 모바일 페이지 쇼 이벤트 2 번 실행

답변

관련 문제