Jquery Mobile在jquery準備好文檔之後向ui-grid添加內容

Question

我正在開發某種小型遊戲，但遇到了問題。

我正在使用Jquery Mobile。

問題很簡單，我的動態內容會加載視覺明智，我確實看到卡背面，但點擊事件dosent發射。我注意到我的文檔已經準備好了，jquery已經有了這個東西。

我嘗試了各種不同的東西，例如刷新，通常與列表做伎倆，但由於這是一個UI網格，這是不同的。

我的下面的exmaple代碼是什麼結構和結構的簡短片段。

我正在尋找一種方法在ui-grid-c中刷新我的內容，以便點擊事件可以觸發。

在底部有一個警告（「我想看到這個彈出消息」）;。我想看到這個彈出。

在我的index.html文件

<script src="js/events.js"></script>   
<script src="js/newgriditems.js"></script>  

這是我的靜態HTML JQM電網

<div class="ui-grid-c" id="cards"> 

</div> 

我打電話從newgriditems.js

function newCards() { 
    var new = '<div class="ui-block-a"> 
    <img src="img/backside.jpg" /> 
    </div>'; 

    $("#cards").html(new).trigger("create"); 
    $("#cards").page(); 
} 

在events.js此功能有一個

$(document).ready(function() { 

    $(".ui-grid-c div img").click(function() { 
    alert("I want to see this popup message"); 
    }); 

} 

它的工作原理，如果我把內容添加爲靜態內容。

Answer 1

首先，總是避免在jQuery Mobile中使用.ready()。

重要：使用$(document).bind('pageinit')，不$(document).ready()

你的jQuery學習的第一件事就是調用代碼$（文件）。就緒（）函數中，所以一切都會立即執行的DOM被加載。但是，在jQuery Mobile中，Ajax用於在瀏覽時將每個頁面的內容加載到DOM中，而DOM就緒處理程序僅對第一頁執行。要在加載並創建新頁面時執行代碼，可以綁定到pageinit事件。該事件在本頁面的底部詳細說明。

來源：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

當動態添加元素，你需要這樣附着事件

$('.static_parent').on('event', '.dynamic_element', function() { 
// code 
});