Question

我想创建一个单页网站（顶部导航，左侧边栏和#content div来交换内容）。

$(document).ready(function() { // or click on a button
$('#content').load('somepage.php');
});

<script src="jquery-1.9.1.min.js"></script>
<script src='index.js'></script>

脚本在加载页面之外，即在主页面内。

两个问题：

这种方法有任何问题或缺点吗？
为什么jquery在加载的#somepage.php内工作但是index.js 不起作用？我必须在加载的页面中编写代码。

例如：

$("#stick").click(function() {
    $(this).hide();
});

此代码位于index.js内。 stick位于somepage.php内。在我在somepage.php

Answer 1

如果您从

重构代码

$("#stick").click(function() {
    $(this).hide();
});

到

$(document).on('click', "#stick", function() {
    $(this).hide();
});

...等。对于你所有的其他元素。

这将按原样运作。无需回调等，并且可以将js文件放在加载页面中，而不是加载页面。

ImShogun的答案非常低效，并且会不断重新绑定您的活动并导致意大利面条代码等。

阅读.on

上的jQuery文档

On，将事件附加到文档并根据选择器（"#stick"）监听事件，因为文档永远不会脱离上下文，事件处理程序也不会这样，因此这将适用于动态代码没有重新绑定。

Answer 2

如果用户已关闭JS，该网站将无法正常工作。使用后备（使用新内容重新加载网站）
什么是index.js？你的意思是你写了一个在index.php中加载的javascript，它对DOM做了一些事情，然后加载一个页面（插入到#content），而JS在加载的页面上不起作用？

使用jQuery处理此问题，see this documentation。

Answer 3

首先，您使用混合的html和javascript显示一些代码，因此很难假设您的网页首先加载了什么，也许您应该提供完整的代码。

但假设您正在加载jquery脚本然后索引脚本然后运行加载代码，那么应该有：

您的加载中的回调会触发您在index.js中编写的内容的执行
somepage.php中的一个脚本标记会触发你的index.js中的内容（不太推荐，通过ajax加载混合的html和javascript可能会让头脑和javascript引擎混淆！）
从jquery load（）切换到可以配置为“async：false”的jquery ajax（），这比以前的解决方案更不推荐，因为如果在许多地方读取同步请求 evil < / strong>，也因为它是真的。

因为现在，您的index.js脚本可能正在尝试使用尚未加载的html页面，您的页面加载是异步的，这意味着可能会发生在index.js中写入的任何内容的执行之前加载完成。

所以我会这样做：

1）将index.js中的任何执行代码集中到“afterLoad”函数

index.js内容：

afterLoad=function(){ alert('Hello World'); } otherStuff1=function(){ ... } ...

2）相应地修改加载脚本，以便在加载页面后执行回调：

$(document).ready(function() { // or click on a button $('#content').load('somepage.php',function(){ afterLoad(); }); });

并且......是的，这种方法可能存在缺点，搜索引擎试图浏览您的网站并只查找一个页面。应该有一个“后备”，所以机器人（没有javascript引擎）仍然可以通过经典超链接浏览页面。

带有jquery load（）的单页网站

3 个答案: