Question

我有以下使用jQueryMobile Sliders的代码：

<!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>

滑块移动时，更改事件不会触发。我发现问题是因为jQueryMobile在第一次导航时将页面渲染到我的子页面Lights并破坏事件本身。这可以使用

来证明

console.log($('#slider').data('events').change);

在事件附件和页面渲染之后的JS控制台中

。问题是：

如何附加持久性事件处理程序或指示jQueryMobile将来附加它

我不想在页面渲染后添加事件。我想动态创建元素ant立即附加事件（或附加一个将在渲染后附加事件的回调）。

UPD ：这是指向JavaScript kitchen的链接，您可以在其中查看它是如何工作的。

Answer 1

我想知道你是否应该调用pageInit而不是$（document）.ready？

http://jquerymobile.com/demos/1.0/docs/api/events.html

Answer 2

这应该有用（我只是在jsfiddle上测试过）。变化：

$(row).find('#slider').bind('change', function(){$('#vv').val($(this).val()); });

为：

$('div').delegate('#slider','change', function(){$('#vv').text($(this).val()); });

如果你想确保它只是改变下一个span你可以做这样的事情：

$('div').delegate('#slider','change', function(){
   $(this).closest('#lights_content').next('span').text($(this).val()); 
});

如何在jQueryMobile中将事件附加到动态加载的子页面？

2 个答案: