1

我已经尝试了我在互联网上找到的所有内容，但仍然无法正常工作，

我有一个主页，我需要将 html 内容加载到 div 中，例如：

<div data-role="content" id="mainc">
</div>

问题是，jquerymobile css 没有应用于内容，我一直在尝试使用 .load 触发创建事件，尝试使用 .html，没有任何帮助，这是我尝试过的一些事情：

（他们完美地加载了内容，只是没有应用 jquery 样式）

$("#mainc").load(target, function () {
    $(this).trigger('create');
});

--

$('#mainc').load(target);
$('#mainc').trigger('create');

--

$.get(target, function(data) {
    $("#mainc").html(data);
    $('#mainc').listview('refresh');
});

还有更多，仍然在做同样的事情。

结果如下：

在此处输入图像描述

4

1 回答 1

2

解释：

您的第一个加载方法通常是正确的，但有一个问题，仅加载列表视图时它不起作用。但当然有一种解决方法。

工作示例：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pagebeforeshow', '#index', function(){ 
                $("#index").load("load.html", function() {
                    $(this).trigger("pagecreate");
                });
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="index">

        </div>    
    </body>
</html>

加载.html

<div data-theme="b" data-role="header">
    <h1>Index page</h1>
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->  
</div>

<div data-role="content">
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->  
</div>
于 2013-06-03T11:15:19.863 回答