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

我已经使用jQueryMobile滑块下面的代码：如何将事件附加到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>

的变化事件而滑块移动不火。我发现这个问题是因为jQueryMobile在第一次导航到我的子页面Lights时渲染页面并破坏事件本身。这可以证明使用

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

在JS控制台刚刚附加事件和页面渲染后。现在的问题是：

如何安装持久事件处理程序或指示jQueryMobile将其固定在未来

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

UPD：这里是JavaScript kitchen的链接，在这里你可以看到它是如何工作的。

来源

2011-12-27 PoltoS

林略有困惑，是你创建多个滑块？如果是这样，为什么你所有的滑块都有相同的ID？你不需要使用find，一个简单的选择器应该工作得很好。 – Matt

这是代码的一部分，所以不要被奇怪所迷惑。事实上，我对所有滑块都使用相同的id，但我使用$（el）.find（'＃slider'）来选择某个el下的子滑块。这是不好的，我知道... – PoltoS

你应该把它改为一个类而不是id。这是不正确的HTML，因为它是。 – Matt

这应该工作（我只是测试它在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()); 
});

来源

2011-12-27 12:17:27 john

我仍然在jQuery 1.6上。我有义务更新吗？ – PoltoS

没有。而不是'试'试试'活着'。看看是否有帮助。 – john

'活着'没有帮助。 – PoltoS

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

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

来源

2011-12-27 12:15:25

那么，我应该使用$（document）.bind（'pageinit'，...）吗？问题是在我的幻灯片被jQueryMobile渲染后，事件被删除。 – PoltoS

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

回答

相关问题