代码之家 › 专栏 › 技术社区 › dallin

从jquery.loadAjax调用添加到DOM的document.ready事件的预期行为是什么?

document-ready jquery-ui ajax jquery javascript

dallin · 技术社区 · 6 年前

我有一个网站同时加载多个jqueryui对话框窗口。我使用 JQuery.load ajax call . 这些对话框的内容有时也可以作为单独的网页加载,因此每个对话框都有自己的$(document).ready()函数(或简称为$(function())。我不确定在原始文档完全加载后,当Ajax加载时,$(document).ready()函数应该如何工作。

我在这里遇到了一些奇怪的功能。出于某种原因,它在document.ready事件中运行代码 当它到达声明的时候 ,就好像它是顺序代码而不是事件分配。例如:

<script>    
    console.log(1);

    $(function () {
        console.log(3);
    }

    console.log(2)
</script>

我认为,由于JS的单线程特性和事件冒泡,它将等待执行,直到全局级脚本完成。换句话说,我希望这是一个输出:

1
2
3

但出于某种原因,它实际上正在输出:

1
3
2

知道为什么会发生这种行为吗?

1 回复 | 直到 6 年前

Kaiido NickSlash 6 年前

their function

$.deferred

window.onload = e => {
  console.log('start of window onload');
  $(()=>console.log('$ready')); // executed synchronously
  console.log('end of window onload');
};

<!-- jQuery < 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

window.onload = e => {
  console.log('start of window onload');
  $(()=>console.log('$ready')); // deferred
  console.log('end of window onload');
};

<!-- jQuery >= 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

6 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

6 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

6 年前

Paili · 如何在jQuery自动完成中添加其他内容?

6 年前

monu · 动态嵌套选项卡创建

6 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

6 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

6 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

6 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

6 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

6 年前