Question

我正在使用jquery mobile 我有3页，在页面之间点击之后，css没有呈现

LoadCss.js

$(document).on("pageinit",function(event) {
    $("#categoriesPage").on('pageshow', function () {
        $('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
        $('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
    });
    $("#wordPage").on('pageshow', function () {
        $('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
        $('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
    });
    $("#searchPage").on('pageshow', function () {
        $('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
        $('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
    });
  });

HTML

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'/>
    <meta name="viewport" content="width=device-width"/>
    <meta charset="UTF-8">




    <script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
    <script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>

    <!--player-->
    <script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
    <script type="text/javascript" src="video.js"></script>
    <script type="text/javascript" src="mainController.js"></script>
    <script type="text/javascript" src="loadCSS.js"></script>

</head>

<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
    <div data-role="page" id="firstPage">
               ... some logic
    </div>


    <div data-role="page" id="secondPage">
                  .. sonle logic 
    </div>

    <div data-role="page" id="thirdage">
             ..........

    </div>



</div>



</body>
</html>

我还尝试将CSS放在标题中，而不是在事件上，但它仍然无法正常工作

<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
    <link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">

Answer 1

请使用属性方法尝试以下方法。请注意它们的应用顺序。这将为所有浏览器提供更好的兼容性（IE有问题）：

要进行测试，请不要将JQuery代码放在外部LoadCSS.js文件中 - 将其放入HTML文件中。它应该每次都有效。从外部JS文件加载时，由于浏览器缓存文件，某些事件并不总是在您预期时触发。

正如@nishi所说，记得在添加新CSS之前删除旧的CSS。

$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');

点击几次后，不会加载css

1 个答案: