Мой .on Swipe работает только один раз, прежде чем сломается и придется все обновлять - JQuery Mobile/Javascript
Итак, мне удалось собрать скрипт для моего, когда я нажимаю на свое изображение, он показывает всплывающее окно, а когда я прокручиваю изображение влево или вправо, он показывает скрытые изображения в моем javascript. Однако, когда я попал на свою индексную страницу и перешел к домашнему html. Когда я нажимаю на фотографию, функции смахивания не работают, пока я не зайду в свой файл javascript и в основном перепишу функцию смахивания, прежде чем она снова заработает, но затем сломается после того, как я вернусь на свою индексную страницу.
вот индексная страница моего сайта: http://titan.dcs.bbk.ac.uk/~aaldib01/mad/madfma/index.html
Затем дома > 2 спальни с террасами > house1.html
Есть ли способ исправить проблему или улучшить мой javascript, чтобы это больше не было проблемой?
Спасибо.
* обратите внимание, проблема, я думаю, заключается в том, где находится код изображения. (я удалил большую часть другого кода, так как это не влияет на него)
я пробовал использовать .bind("swiperight", function() но это дает мне тот же результат. Он работает один раз, а затем не работает после того, как я перехожу к index.html > > house1.html
Вот код house1.html (data-role="content":
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<link rel = "stylesheet" href = "css/themes/blue.min.css" />
<link rel = "stylesheet" href = "css/themes/jquery.mobile.icons.min.css" />
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script src = "http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src = "images.js"></script>
<title>House 1</title>
</head>
<body>
<div data-role = "page" id = "house1" data-theme = "a" data-dom-cache = "true">
<div data-role = "content">
<a href = "#popupImg" data-rel = "popup" data-position-to = "window" data-transition = "pop">
<img src = "pictures/houses/house1/image1.PNG"/ style = "width: 50%;"/>
<div data-role = "popup" id = "popupImg" data-theme = "a" class = "ui-corner-all">
<a href = "#" data-rel = "back" data-role = "button" data-theme = "a" data-icon = "delete" data-iconpos = "notext" class = "ui-btn-right">Close</a>
<img src = "pictures/houses/house1/image1.PNG" style = "width: 100%;" />
</a>
</div>
<div data-role = "footer" data-position = "fixed">
<div data-role = "navbar" data-id = "footernav">
<ul>
<li><a href = "about.html">About</a></li>
<li><a href = "">Favourites</a></li>
<li><a href = "contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
И вот файл javascript:
$(document).ready(function () {
var i = 0;
var imgURL = [];
imgURL.push('pictures/houses/house1/image1.PNG');
imgURL.push('pictures/houses/house1/image2.PNG');
imgURL.push('pictures/houses/house1/image3.PNG');
imgURL.push('pictures/houses/house1/image4.PNG');
$("#house1").on("swiperight",function () {
if (i < (imgURL.length - 1)) {
i++
} else {
i = 0;
}
var imgStr = "<img src = " + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
$("#house1").on("swipeleft",function () {
if (i > 0) {
i--
} else {
i = (imgURL.length - 1);
}
var imgStr = "<img src = " + imgURL[i] + " style='width:100%'>";
$('#popupImg').html(imgStr);
});
});
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема в том, что ваш скрипт image.js не загружается, если вы начинаете со страницы индекса и переходите к Дому 1. Вы можете проверить это, просмотрев исходный код вашего сайта, когда вы загружаете Дом 1 напрямую (он будет там) по сравнению с запуском в индексе и перейти к Дому 1 (он будет отсутствовать в <head>).
Причина этого в том, что jQuery Mobile использует AJAX для навигации между страницами. По умолчанию каждый запрос страницы будет обновлять только элемент <body>, но не <head> (дополнительную информацию можно найти в этом Демонстрационная страница jQuery для мобильных устройств).
На этой странице есть несколько решений:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the
pageinitevent (details below) to run necessary code when a specific page is created (which can be determined by itsidattribute, or a number of other ways).Another approach for page-specific scripting would be to include scripts at the end of the
bodyelement when nodata-role=pageelement is defined, or inside the firstdata-role=pageelement.
В конечном счете вам решать, какой из этих методов наиболее подходит для вашего конкретного случая использования.
Спасибо Самир за информацию. Я написал на своей внутренней странице index.html «дом» и написал в
rel = "external", что помогло решить проблему. Но учту ваш комментарий на будущее