腳本未能修改AJAX頁面加載的jQuery Mobile頁面上的頁腳？

我從這裏使用jQuery倒計時插件：http://keith-wood.name/countdown.html。腳本未能修改AJAX頁面加載的jQuery Mobile頁面上的頁腳？

我正在嘗試使用它在jQuery Mobile站點的頁腳中進行倒計時。我通過PHP Include在每個頁面上加載相同的頁腳。該腳本可以在初始頁面加載或任何刷新時正常工作，但在頁面之間導航時不會顯示。

我不知道這是我打電話jQuery的倒計時特別的方式，或者我有越來越腳本在一般負載由於jQuery Mobile的的AJAX頁面加載的更大問題的一部分的問題。

下面是代碼，因爲它現在。注意：在這個例子中，我已經獲得了腳本，但是我已經在頭部上方，在div上方，div下方，在單獨的文件中嘗試過它 - 我可以想到的任何地方，它的工作原理都是一樣的辦法。插件本身在站點頭部鏈接，但我也嘗試將鏈接移動到頁腳無效。

<!-- Footer --> 
<div data-role="footer" data-position="fixed" data-theme="d"> 

<h2><div id="eventtimer"></div></h2> 

<script> 
$(document).on('pageinit', function(event){ 

    $('#eventtimer').countdown({ 
     until: new Date(2013, 6-1, 4), 
     compact: true, 
     layout: 'Countdown: <em>{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}</em>', 
    }); 

    $('#eventtimer').ready(function(){ 
     console.log('Test'); 
    }); 
}); 
</script> 
</div><!-- Close Footer -->

console.log測試確實工作得很好，讓我相信我的整體調用是正確的。

來源

2013-05-17 Chaz

注意，'$（「＃eventtimer」）。就緒（'沒有任何意義。 –

你有一個ID重複問題。若2頁加載和初始化，第1頁仍處於活動狀態，因此$（」 #eventtimer「）將選擇頁面1中的頁面而不是頁面2，因爲ID必須是唯一的，並且任何將事件綁定到文檔的代碼都應該在頁眉中，否則在多次瀏覽頁面時會綁定多個事件。 –

@Kevin B - 我認爲你是完全正確的，我只是想到了這個想法，並嘗試過它，它的工作！ – Chaz

這次解決了！當我盯着自己的問題意識到加載的jQuery模型可能意味着我有一個ID衝突，因爲我在每個頁面上使用相同的頁腳。改變它到一個類，而不是它的工作！

更新代碼：

<!-- Footer --> 
<div data-role="footer" data-position="fixed" data-theme="d"> 

    <h2><div class="eventtimer"></div></h2> 
    <script type="text/javascript" src="<?php echo $siteRoot; ?>/_scripts/vendor/jquery.countdown.js"></script> 
    <script> 
    $(document).on('pageinit', function(event){ 

     $('.eventtimer').countdown({ 
      until: new Date(2013, 6-1, 4), 
      compact: true, 
      layout: 'Countdown: <em>{dn} {dl} {hnn}{sep}{mnn}{sep}{snn}</em>', 
     }); 

     $('#eventtimer').ready(function(){ 
      console.log('Test'); 
     }); 
    }); 

</script> 

</div><!-- Close Footer -->

我」不是紀念這一回答，因爲我可能得到幸運，但還是做錯了......請隨時提供更好的洞察力。

來源

2013-05-17 17:28:09 Chaz

腳本未能修改AJAX頁面加載的jQuery Mobile頁面上的頁腳？

回答

相關問題