1

I want to crate a single-page website (top navigation, left sidebar, and a #content div for exchanging content).

$(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>

scripts are outside loaded page, i.e. inside main page.

Two questions:

  1. Is there any issue or downside of this approach ?
  2. Why jquery works inside loaded #somepage.php BUT index.js doesn't work ? I must write its code inside loaded page.

For example: 

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

this code is inside index.js. stick is inside somepage.php. The code doesn' work till I write them inside somepage.php

4

3 回答 3

4

如果你重构你的代码

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

至

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

..ETC。对于所有其他元素。

这将按原样工作。无需回调等，将使您能够将 js 文件放入加载页面，而不是加载页面。

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

阅读.on上的 jQuery 文档

On，将事件附加到文档并根据 selector( "#stick") 侦听事件，因为文档永远不会脱离上下文，事件处理程序也不会，因此这将与动态代码一起工作而无需重新绑定。

于 2013-11-05T11:09:39.760 回答
1

  1. 如果用户关闭了 JS，该站点将无法运行。使用后备（网站重新加载新内容）

  2. 是什么index.js？你的意思是你写了一个加载在 index.php 中的 javascript，它对 DOM 做一些事情，然后加载一个页面（插入到#content），并且 JS 在加载的页面上不起作用？

要使用 jQuery 处理此问题，请参阅此文档。

于 2013-11-05T10:45:05.983 回答
0

首先，你展示了一些混合了 html 和 javascript 的代码，所以很难假设你的网页中首先加载了什么，也许你应该给出完整的代码。

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

  • 负载中的回调将触发执行您在 index.js 中编写的内容
  • somepage.php 中的脚本标记会触发 index.js 中的某些内容（不太推荐，通过 ajax 加载混合的 html 和 javascript 可能会让大脑和 javascript 引擎感到困惑！）
  • 从 jquery load() 切换到 jquery ajax() 可以配置“async:false”，这比之前的方案更不推荐，因为如果在很多地方读到同步请求是邪恶的，也因为它是真的.

因为现在，您的 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 引擎）仍然可以通过经典超链接浏览页面。

于 2013-11-05T10:56:35.307 回答