gpt4 book ai didi

javascript - 点击几次后 CSS 未加载

转载 作者:行者123 更新时间:2023-11-28 06:45:01 24 4
gpt4 key购买 nike

我正在使用jquery mobile我有 3 个页面,在页面之间进行一些点击后,CSS 未呈现

加载CSS.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">

最佳答案

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

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

正如 @nishi 所说,请记住在添加新 CSS 之前删除旧 CSS。

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

关于javascript - 点击几次后 CSS 未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33473585/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com