У меня следующий код, который использует слайдеры jQueryMobile:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.mobile.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var row = $(
'<div data-role="fieldcontain">' +
'<label for="slider"></label>' +
'<input type="range" name="slider" id="slider" value="0" min="0" max="99"/>' +
'</div>');
$('#lights_content').append(row);
$(row).find('#slider').bind('change', function(){ console.log($(this).val()); });
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="b">
<div data-role="content">
<a href="#lights" data-transition="slide">Lights</a>
</div>
</div>
<div data-role="page" id="lights" data-theme="b" data-add-back-btn="true">
<div data-role="header" data-theme="b"><h4>Light</h4></div>
<div data-role="content" id="lights_content"></div>
</div>
</body>
</html>
Событие change не срабатывает, когда движется слайдер. Я обнаружил, что проблема в том, что jQueryMobile отображает страницу при первой навигации на мою подстраницу Lights и уничтожает само событие. Это можно доказать, используя
console.log($('#slider').data('events').change);
в консоли JS сразу после прикрепления события и после рендеринга страницы. Вопрос:
Как подключить обработчик постоянных событий или дать команду jQueryMobile подключить его в будущем
Я не хочу добавлять событие после рендеринга страницы. Я хочу динамически создать элемент и немедленно присоединить событие (или прикрепить обратный вызов, который присоединит событие после рендеринга).
UPD : Вот ссылка на JavaScript кухня , где вы можете увидеть, как она не работает.