如果我包含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的页面的链接） ，我可以在控制台中看到以下错误：
Uncaught TypeError：无法设置未定义的属性'mobile'。

请注意，这个主页基本上是包含库声明和html链接的简单代码。

编辑：
我之前错过了jQuery lib，因此发现了Uncaught TypeError。
现在，我的库符合以下顺序：

 < script src =// ajax.googleapis。 COM / AJAX /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本> 
< 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 =stylesheethref =// ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css/> 
< link rel =stylesheethref =// 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中。

 < div data-role =page> 
<！ -  JS代码 - > 
< / div> 
  

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屋！