javascript — JQuery Mobile Duplicate Js / Js не работают на другой странице

JQuery Mobile Duplicate Js / Js не работают на другой странице

У меня есть проблема в реализации Javascript на мобильном телефоне Jquery, каждый раз, когда я возвращаюсь со страницы, javascript будет дублироваться.

Вот пример кода:

{amp}lt;head{amp}gt; {amp}lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"{amp}gt; {amp}lt;title{amp}gt;JS duplicated page1{amp}lt;/title{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-1.10.2.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="css/style-mobile.css"{amp}gt; {amp}lt;script src="js/tes.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="demo-wrapper" data-role="page" data-theme="a" id="page1"{amp}gt; {amp}lt;div class="header" data-role="header" style="position:fixed; background-color:#004165;"{amp}gt; {amp}lt;div id="div1"{amp}gt; {amp}lt;span class="right"{amp}gt;Click me{amp}lt;/span{amp}gt; {amp}lt;div id="option"{amp}gt;{amp}lt;span style="color:white;"{amp}gt;AB C{amp}lt;/span{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="separator" style="height:100px;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;a href="jsduplicate2.html" data-transition="slide"{amp}gt;Go to page2{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; 

а вот еще одна страница:

 {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"{amp}gt; {amp}lt;title{amp}gt;JS duplicated page2{amp}lt;/title{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-1.10.2.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;link rel="stylesheet" href="css/style-mobile.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="demo-wrapper" data-role="page" data-theme="a" id="page2"{amp}gt; {amp}lt;div class="header" data-role="header" style="position:fixed; background-color:#004165;"{amp}gt; {amp}lt;div id="div1"{amp}gt; {amp}lt;span class="right"{amp}gt;Click me{amp}lt;/span{amp}gt; {amp}lt;div id="option"{amp}gt;{amp}lt;span style="color:white;"{amp}gt;AB C{amp}lt;/span{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="separator" style="height:100px;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;a href="jsduplicate1.html" data-transition="slide"{amp}gt;Go to page1{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

А вот и кастомный JS:

 $( document ).on( "pageshow", function() { $(".header #option").toggle('inactive'); $(".header #option").hide(); $(".right").click(function(){ $(".header #option").toggle('inactive'); $(".header #option").show(); }); }); 

Каждый раз, когда я возвращаюсь со страницы 2, тумблер запускается 2 раза, когда я нажимаю на него.

Если я инициализирую JS только на странице 1, при переходе на страницу 2 js не работает. Пожалуйста помоги ..

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector