Jquery Mobile 在 jquery 的文档准备就绪后将内容添加到 ui-grid

Question

我正在开发某种小游戏，但我遇到了一个问题。

我正在使用Jquery Mobile。

问题很简单，我的动态内容将加载视觉明智，我确实看到一张卡片背面，但点击事件触发了。 我建议我从jquery准备的文档与此有关。

我尝试了各种不同的事情，例如刷新，通常使用列表解决问题，但由于这是一个 UI-Grid，所以这是不同的。

我下面的示例代码是结构是什么以及如何的简短片段。

我正在寻找一种在 ui-grid-c 中刷新我的内容的方法，以便我的点击事件可以触发。

底部有一个警报("我想看到此弹出消息"(;。 我想看到这个弹出窗口。

在我的索引.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();
}

在事件中.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 中学到的第一件事是在 $(document(.ready(( 函数中调用代码，这样一旦加载 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
});