jQuery Mobile，如何在不丢失javascript和CSS的情况下将外部html页面加载到DIV元素中

问题描述 投票：0回答：0

加载是成功的，但是当我单击订购菜单时，css或javascript变得不受欢迎。 当我在要加载的外部html中包含javascript时，结果页是oke，但是我的overlay div无法正常工作（#purchase）。 请帮我... ：（

这是我的代码 

<!DOCTYPE html>
<html lang="ID">
<head>
    <title>VILLA APK</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

    <!--start page-->
    <div data-role="page" id="home">

    <div data-role="panel" id="mypanel">
            <ul data-role="listview">
            <li><a href="#" id="home" onclick="chcontent(this.id)">Home</a></li>
            <li><a href="#" id="about" onclick="chcontent(this.id)">About</a></li>
            <li><a href="#" id="order" onclick="chcontent(this.id)">Order</a></li>
            <li><a href="#" id="contact" onclick="chcontent(this.id)">Contact</a></li>
            <li><a href="#" id="terms" onclick="chcontent(this.id)">Terms & Conditions</a></li>
            </ul>
    </div>

    <div data-role="popup" id="purchase" data-theme="a" data-overlay-theme="b" style="max-width:340px; padding-bottom:2em;">
        <h3>Your Order</h3>
        <p id="purchaseitem">Empty</p>
        <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-b ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">Checkout</a>
        <a href="index.html" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Continue</a>
    </div>

    <div data-role="header">
        <h1>VILLA APK</h1>
        <a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext">menu</a>
        <a href="#purchase" onclick="arrcount()" data-rel="popup" data-position-to="window" data-transition="pop">My Order</a>
        <div data-role="navbar">
            <ul>
            <li><a href="#" id="home" class="ui-btn-active" onclick="chcontent(this.id)">Home</a></li>
            <li><a href="#" id="about" onclick="chcontent(this.id)">About</a></li>
            <li><a href="#" id="order" onclick="chcontent(this.id)">Order</a></li>
            <li><a href="#" id="contact" onclick="chcontent(this.id)">Contact</a></li>
            <li><a href="#" id="terms" onclick="chcontent(this.id)">Terms & Conditions</a></li>
            </ul>
        </div>
    </div>

    <div data-role="main" class="ui-content" id="mycontent">
    </div>

    </div> 
    <!--end page-->

<script>

function chcontent(x){
    $("#mycontent").load(x+".html");
    $("#mycontent").enhancedwithin();
    //$mobile.loadPage("about.html");
    //$("#mycontent").pagecontainer("load","about.html");

}
chcontent("home");

var foodcart = [];
function taporder(itm) {
    lanjut=confirm("Order this item?");  
    if(lanjut){
        foodcart.push(itm);
        }else{}
}

function arrcount(){
    result=foodcart.reduce((a, c) => (a[c] = (a[c] || 0) + 1, a), Object.create(null));
    document.getElementById("purchaseitem").innerHTML ="";
    for(const [key, value] of Object.entries(result)) {
        document.getElementById("purchaseitem").innerHTML += key+": "+value+"<br/>"; 
    }
}

</script>           

</body>
</html>

第二个 

<ul data-role="listview">
    <li><a href="restaurant.html#order" data-ajax="false">
        <img src="images/Jellyfish.jpg">
    <h2>Restaurant</h2>
    <p>.....</p></a>
    </li>
    <li><a href="#">
        <img src="images/Jellyfish.jpg">
    <h2>Bar</h2>
    <p>....</p></a>
    </li>
    <li><a href="#">
        <img src="images/Jellyfish.jpg">
    <h2>Spa</h2>
    <p>...</p></a>
    </li>
    <li><a href="#">
        <img src="images/Jellyfish.jpg">
    <h2>Transport</h2>
    <p>...</p></a>
    </li>
</ul>

请帮助我..我在jQuery Mobile中是新的，谢谢

jquery-mobile
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.