jQuery：使用 (document).ready(); 的正确方法是什么？在 .click() 和 .load() 组合中？答案

【问题标题】：jQuery: What's the proper way to use (document).ready(); in a .click() and .load() combination?jQuery：使用 (document).ready(); 的正确方法是什么？在 .click() 和 .load() 组合中？
【发布时间】：2013-10-25 21:36:09
【问题描述】：

我正在尝试为移动应用创建一个菜单，该菜单将我的 #content - DIV 的内容转换为 .HTML - 文件中的新内容。

我正在使用此代码：

$(document).ready(function(){
    $('#menu li').click(function(){
        $('#content').load(this.id + '.html #content *');               
    });
});

这可行，除了一个 HTML 文件：

<div id="content">  
    <div id="map"></div> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="assets/default.js" type="text/javascript"></script> 
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js" type="text/javascript"></script>              
    <script src="assets/map.js" type="text/javascript"></script> 
</div>

我正在尝试加载由 Leaflet-API 生成的地图，但每个浏览器只解析空的 DIV-Container (#map)。

我认为问题可能是我的map.js 在构建 DOM 后没有被触发。尝试使用$(document).ready() 解决此问题，但不幸的是它不起作用。

有什么建议吗？

会很棒，干杯！

【问题讨论】：

你在那个 HTML 文件中加载 jQuery 吗？
不，我没有。现在添加了指向 jQuery 和我的其他 JS 文件的链接，但没有任何改变。
你需要在map.js之前加载jQuery，是吗？
文件是否有<ol id="menu">？
是的，一切都在map.js之前加载

标签： jquery leaflet document-ready

【解决方案1】：

您可以从加载 jquery 文档中阅读

脚本执行

当使用没有后缀选择器表达式的 URL 调用 .load() 时，内容会在脚本被删除之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，因此不会被执行。

您正在使用选择器表达式调用 load...

我会以其他方式做。

修改您的 map.js 以包含一个执行地图内容的函数（即 mapInit ）。
将所有这些 scrips 标签放在通用 html 文档的头部。

通过回调您的地图函数调用 load

$(document).ready(function(){
  $('#menu li').click(function(){
    $('#content').load(this.id + '.html #content *',mapInit());               
  });
});

【讨论】：