如何將事件附加到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中動態加載的子頁面？

回答

相關問題