jQuery mobile mobileinit 未触发答案

【问题标题】：jQuery mobile mobileinit not triggeredjQuery mobile mobileinit 未触发
【发布时间】：2013-02-14 18:07:09
【问题描述】：

我想在加载 jQuery mobile 之前通过 AJAX 动态加载页面内容，因此我尝试使用 mobileinit 事件。但它不起作用。这是我的代码，请帮忙

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <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="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css" />
    <script src="js/jquery-1.8.2.min.js"></script>
    <script>
        $(document).bind("mobileinit", function()  {        
            $("#notification").text("Please enter your domain name.");
        });
    </script>
    <script src="js/jquery.mobile-1.3.0.min.js"></script>
    <title>Insert title here</title>
    </head>
    <body>
       <h3 id="notification" style="font-family: fantasy; color: red; text-align: center;"></h3>
    </body>
    </html>

【问题讨论】：

你能把绑定到mobileinit事件的那部分代码贴出来吗？
@FrédéricHamidi 抱歉，我错误地发布了之前版本的代码。请查看更新帖子。

标签： jquery cordova jquery-mobile mobile-application

【解决方案1】：

试试这个

<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script>
function init(){
    $(document).bind("mobileinit", function()  {        
        $("#notification").text("Please enter your domain name.");
    });
}
</script>
<body onLoad="init()">
</body>

【讨论】：

不，在加载 jQuery Mobile 后绑定到 mobileinit 不会有任何效果，因为该事件已经被触发了。

【解决方案2】：

这行不通。

当 mobileinit 事件被触发时，DOM 内容仍然是空的。 Pageinit 是您甚至可以考虑这样做的第一个事件。但更好的是 pagebeforeshow 事件。

$(document).on('pagebeforeshow', '#index', function(){    

});

这是我添加动态生成内容的旧示例：http://jsfiddle.net/Gajotres/GnB3t/

还有一个例子，点击下一步按钮可以看到动态生成的页面：http://jsfiddle.net/Gajotres/8jcGb/

【讨论】：