标签: document-ready

jQuery ready()的四种变体 - 有什么区别?

我已经看到了四种不同的方法来告诉jQuery在文档准备好时执行一个函数.这些都是等价的吗?

$(document).ready(function () {
  alert('$(document).ready()');
});  

$().ready(function () {
  alert('$().ready()');
}); 

$(function () {
  alert('$()');
});     

jQuery(function ($) {
  alert('jQuery()');
}); 
Run Code Online (Sandbox Code Playgroud)

jquery dom document-ready

10
推荐指数
2
解决办法
2097
查看次数

$(document).ready和$(document).on('pageinit')之间的区别

我正在使用jquery mobile,我想重现这段代码:

$(document).ready(function () {
    $.mobile.loading('show');
});
Run Code Online (Sandbox Code Playgroud)

它显示了微调器,直到我决定使用其他函数隐藏它

$.mobile.loading( 'hide' );
Run Code Online (Sandbox Code Playgroud)

现在我看到document.ready()在jquery mobile 1.2中已被弃用,所以他们建议用它替换它 $(document).on('pageinit')

但如果我用建议的代码替换我的代码微调器自动隐藏......为什么?这是新代码:

 $(document).on('pageinit',function(){
     $.mobile.loading( 'show' );
 });
Run Code Online (Sandbox Code Playgroud)

jquery document-ready jquery-mobile

9
推荐指数
2
解决办法
2万
查看次数

jQuery文档准备好了与社交共享服务的buggyness

我有一个奇怪的问题可能与jQuery文档准备好有关.下面是一个包含常用社交网络脚本的html和脚本块.下面的Javascript块dd_outer在body div的左边缘显示div,当浏览器窗口缩小时,div淡出并且dd_footerdiv被淡入.两个div之间的淡入淡出和淡出效果正常.

问题有两个:一个问题是当浏览器窗口是全宽(1200px +)时,Facebook脚本将无法加载并始终显示; 它有时会出现,有时则不会出现,有时会在页面重新加载后出现,有时则不会出现.(不涉及浏览器或.htaccess缓存).只有Facebook的份额不能始终如一地显示; 所有其他服务显示确定.

第二个问题是,当浏览器窗口很窄时 - 650 px左右,当dd_outerdiv没有显示且dd_footerdiv为 - 页脚div将不会显示在页面重新加载,直到浏览器窗口移动最小量.然后div将显示,Facebook分享和所有.对于移动设备,这是一个问题,因为浏览器窗口将开始变窄并且不应该被"轻推"以进行dd_footerdiv显示.

这个问题可能已经发挥作用,因为我已经从WordPress插件中调整了这个代码,该插件使用选项来设置dd_outerdiv 的位置和滚动高度.这就是文档就绪调用之上的变量的原因.

这是一个似乎是文档准备问题的问题吗?

如何将变量集成到脚本本身?它们是否被硬编码并不重要; 我可以在需要时更换它们.

我会把它扔进一个jsfiddle来演示但是div不会在窗口调整大小的情况下实际浮动.

为清晰起见,我没有包含CSS.

这是html和社交脚本块:

<div class='dd_outer'><div class='dd_inner'><div id='dd_ajax_float'>

<div class="sbutton"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class="sbutton">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="" data-count="vertical" data-via="#">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>

<div class="sbutton"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class="sbutton"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script></div>

</div></div></div>
Run Code Online (Sandbox Code Playgroud)

在页脚中 <div id="dd_footer">that contains the same social scripts as above</div> ,并且通过以下脚本淡入淡出: …

javascript jquery document-ready

9
推荐指数
2
解决办法
642
查看次数

内联/阻止Javascript在文档就绪之前执行了吗?

假设一个HTML文档中的内联Javascript代码(例如正文),这个Javascript代码总是在JQuery文档就绪代码之前执行吗?

例如,以下安全吗?

...
<body>
    <script type="text/javascript">
        var myVar = 2;
   </script>
   ...
</body>

...
$(document).ready(function() {
    alert('My Var = ' + myVar);
}
Run Code Online (Sandbox Code Playgroud)

如果没有,我怎样才能确保安全知道myVar在内联/块代码中定义?

html javascript jquery document-ready

9
推荐指数
2
解决办法
8079
查看次数

jQuery $(document).ready总是等待异步脚本吗?

我想知道jQuery的$(document).ready()函数是否总是等待异步加载的脚本:

HTML

<script async src="...">
Run Code Online (Sandbox Code Playgroud)

JavaScript的

$(document).ready(function(){
   //is the script always loaded at this point?
});
Run Code Online (Sandbox Code Playgroud)

我在jQuery文档中找不到任何对此假设的确认.是否存在明确规定的来源?

jquery asynchronous document-ready

9
推荐指数
0
解决办法
153
查看次数

Angular和jQuery ng-included with document.ready无法正常工作

我正在尝试使用HMTL加载一个放在单独的html中的组件.问题是,只要在浏览器中加载页面就会调用它.

以下是我的模态代码:

<div class="modal fade borderColorC0C0C0 borderRadiusOverride" id="termsAndConditionsPopover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" ng-include="'components/popover/termsAndConditions/termsAndConditions.html'">

</div>
Run Code Online (Sandbox Code Playgroud)

组件代码在这里:

termsAndConditions.html

<div class="modal-dialog borderRadiusOverride">
    <div class="modal-content borderRadiusOverride">
      <div class="termsAndConditionsHeaderColor borderRadiusOverride divHeight50 paddingTop15 paddingLeft15 paddingBottom15 borderBottomColorC0C0C0">
        <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
        <h5 class="modal-title marginBottom15 fontColorTileSteps" id="myModalLabel">Cisco's GSA shipping Policy</h5>
      </div>
      <div class="modal-body borderRadiusOverride fontColorTileSteps">
        This policy outlines the requirements of shipping Internationally including but not limited to:
<ul>
    <li>All members of the Cisco workforce are responsible to adhere to this policy</li>
    <li>AST is …
Run Code Online (Sandbox Code Playgroud)

javascript jquery document-ready angularjs angularjs-ng-include

9
推荐指数
1
解决办法
6665
查看次数

jQuery多文档就绪队列顺序

我知道jQuery中对$(function(){})的调用是按照定义的顺序执行的,但是我想知道你是否可以控制队列的顺序?

例如,是否可以在"Hello World 1"之前调用"Hello World 2":

$(function(){ alert('Hello World 1') });
$(function(){ alert('Hello World 2') });
Run Code Online (Sandbox Code Playgroud)

问题是它是否可能......我已经知道它违背了最佳做法;)

jquery document-ready domready

8
推荐指数
2
解决办法
8348
查看次数

在Partial View中定义jquery ready事件

我在Site.Master页面中定义了一个$(document).ready()事件,我还想在我的一个局部视图中定义另一个$(document).ready()(用于显示msgs和错误消息) ,我在所有页面和所有局部视图中调用此局部视图...

局部视图显示在页面中,也使用模态弹出窗口...所以我尝试了这个但是部分视图中的ready事件没有触发

我有几件事要问:

  • 首先,有可能做我想做的事......
  • 有页面有局部视图,因此页面有两个$(document).ready()事件,所以当页面加载时,这两个事件之间是否存在任何冲突......

如果有些身体可以提供一些例子......

asp.net-mvc jquery partial-views document-ready domready

8
推荐指数
2
解决办法
3万
查看次数

JQuery $(document).ready ajax load

我查看了很多相关的问题,我必须要求这完全不同,因为我只看到了一些似乎有关的问题.我正在通过JQuery Ajax调用加载整个中间div,我只是希望能够在新的区域上执行一些自动JQuery,如$(document).ready允许在加载DOM时.我读到livequery会这样做,但我认为会有一种内置方式.我正在尝试将日期选择器添加到开头的输入字段.

这是将要求后端内容的内容,然后将提取某些特定部分.

$.post("ReportingWizard",$("#wizard_form").serialize(), function (data) { setData(data); });

function setData(data) {
divElement.innerHTML = data;
$(activeTab).fadeIn(); //Fade in the active content
$(".wizardBody").fadeIn();
}
Run Code Online (Sandbox Code Playgroud)

在该divElement中放置的文件内部将有一个需要运行的JQuery方法来更改其中的html.

html ajax jquery function document-ready

7
推荐指数
1
解决办法
2万
查看次数

在 Firefox 中,window.onload 在 jQuery document.ready 之前触发

我创建了一个显示问题的 Codepen:https ://codepen.io/samuelg0rd0n/pen/ExVGQEV

在 Chrome 中,它在窗口 onload 事件之前正确触发 DOMContentLoaded 事件和 jQuery 文档就绪事件。然而,在 Firefox 中,顺序是:

DOMContentLoaded
window.onload
$(window).on('load', function() { ... });
$(document).ready();
$(function() { ... });
Run Code Online (Sandbox Code Playgroud)

window.onload 和 jQuery 窗口 onLoad 都会在 jQuery 文档就绪事件之前触发。我很确定这一定是 jQuery 或 Firefox 中的某种错误。谁可以给我解释一下这个?谢谢。

Chrome版本:81.0.4044.138

火狐版本:75.0

在 macOS 和 Linux 上都尝试过,结果相同。

firefox jquery document-ready domcontentloaded jquery-events

7
推荐指数
1
解决办法
1810
查看次数