如果我包含 jquery.mobile-1.4.3.min.js 库，JavaScript 不会在第一次加载时运行 [英] JavaScript does not run on first load if I include the jquery.mobile-1.4.3.min.js library

问题描述

我面临一个非常奇怪的问题，即我的 javascript 代码在第一次加载页面时没有运行.如果我重新加载/刷新页面，脚本运行良好.

经过一些尝试和试验后，我意识到如果我从上一页(重定向到我的当前页面)中删除 jquery.mobile-1.4.3.min.js 库，那么脚本按预期运行.

任何人都可以帮助解释为什么会发生这种情况以及我该如何解决?

更新:在打开 hpme 页面(其中包含指向包含 JS 的页面的链接)时，我可以在控制台中看到以下错误:未捕获的类型错误:无法设置 undefined 的属性mobile".

请注意，此主页基本上是带有库声明和 html 链接的简单代码.

我之前错过了 jQuery 库，因此出现了 Uncaught TypeError.现在，我的库按以下顺序排列:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script><link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css"/><link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css"/>

现在我的控制台中没有错误，但是下一页中的 JS 仍然没有在第一次加载时运行.奇怪的是，如果我删除 jquery.mobile-1.4.3.min.js 库，JS 工作正常.

解决方案

单页模型

jQuery Mobile 通过 Ajax 加载外部页面；当您有一个指向另一个页面的链接时，jQM 会在该页面中加载第一页 div <div data-role="page"> 并忽略该 div 之外的其他标签.

如果您想在加载的页面中运行 JS 代码，则必须将其放置在页面 div 中.

<!-- JS代码-->

I am facing a very strange problem where my javascript code does not run the first time the page is loaded. If I reload/refresh the page, the script runs fine.

After some hit-and-trial's I realized that if I remove the jquery.mobile-1.4.3.min.js library from the previous page (which redirects to my current page) then the script is running as expected.

Can anyone please help on why this is occurring and how can I resolve it ?

Update: On opening the hpme page (which contains the link to the page containing the JS), I can see the following error in console: Uncaught TypeError: Cannot set property 'mobile' of undefined .

Please note that this home page is basically a simple code with library declarations and html links.

Edit : I had missed the jQuery lib earlier and hence the Uncaught TypeError. Now, my libraries are in the following order :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />

Now there are no errors in my console, but still the JS in the next page does not run in the first load. Oddly, if I remove the jquery.mobile-1.4.3.min.js library, the JS works fine.

解决方案

Single Page Model

jQuery Mobile loads external pages via Ajax; when you have a link to another page, jQM loads first page div <div data-role="page"> in that page and neglects other tags outside that div.

If you have JS code that you want to run in the loaded page, you have to place it inside page div.

<div data-role="page">
   <!-- JS code -->
</div>

这篇关于如果我包含 jquery.mobile-1.4.3.min.js 库，JavaScript 不会在第一次加载时运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！