jquery load方法把一个页面载入到主页面的一个div中，载入页面的javascript消失了 - ITeye问答
jquery load方法把一个页面载入到主页面的一个div中，载入页面的javascript消失了
1、index.html里面有两个div，一个是id是menu，另一个是work，代码如下
&head&
&& &script type="text/javascript" src="jquery.js"&&/script&
&& &script type="text/javascript" src="index.js"&&/script&
&div id="menu"&
&input type="button" id="btnMenu" value="menu1"&
&/div&
& &div id="work"& &/div&
&/body&
&/html&
2、在index.js中对btnMenu绑定事件
$(document).ready(function(){
$("#btn1").click(function () {
$("#work").load("load.html");
3、被载入的页面load.html只包含一个按钮,代码如下：
&html&
&head&
&& &script type="text/javascript" src="jquery.js"&&/script&
&& &script type="text/javascript" src="load.js"&&/script&
&input type="button" id="btn" value="menu1"&
&/body&
&/html&
4、在load.js中对btn绑定事件
$(document).ready(function(){
$("#btn").click(function () {
alert("btn1");
5、测试结果是，在IE6和firefox中都可以正常载入load.html，但firefox中点击load.html的按钮不会执行alert("btn1")，IE6可以。
6、问题是怎么样才能使firefox中也能执行btn的点击事件。好像所有在load.js里的代码都失效了。谢谢大家！
问题补充：把index.js和load.js合并成一个,2个页面共同调用
//////
1、把index.js和load.js合并成一个，也必须在载入load.html后重新绑定事件才行。
2、如果要重新绑定，为了方便必须使用非匿名的function，管理这些非匿名function也是一个头大的问题，特别是当应用比较大的时候。
3、如果想针对load.html单独测试，就是不用index.html进行load直接测试load.html就没有办法了，因为load.html并不包含javascript(如果包含了IE会执行两次事件).
jquery load方法后 重新绑定事件& 看这里有
load.html中html,head,body这些标签是不能出现在div中的
如果load.html的这些标签可以更改的话，简单的就是删除掉，可是看到load.html中的jquery.js被引用，估计是不能删除的，
那可以这样简单的处理，load.html
&script type="text/javascript" src="jquery.js"&&/script&
&script type="text/javascript" src="load.js"&&/script&
&input type="button" id="btn" value="menu1"&
然后重新写你的load方法，改为ajax方法
$.get('load.html',function(data){
data=data.slice(data.indexOf('&body&')+6,data.indexOf('&/body&'));
$("#work").html(data);
楼主看下个问题。
不知道怎么解决的。
把index.js和load.js合并成一个,2个页面共同调用
已解决问题
未解决问题细说 jQuery 事件篇（一） – 代码执行时机
我的图书馆
细说 jQuery 事件篇（一） – 代码执行时机
在元素一篇介绍过，jQuery 可以使用 $(document).ready() 来使得代码在 DOM 加载完毕后自动执行代码，接下来具体介绍下这个机制。
$document.ready() 可以简写为 $()，为了书写更直观，本文暂不采用简写方式。
比较 window.onload
我们可以使用原生 Javascript 中的 window.load 方法实现 $document.ready() 的效果，但两者还是有不小的差异。
对于 window.load 是指整个文档对象已经完完全全地加载到页面中来，而 jQuery 的 $document.ready() 方法则是指 DOM 完全就绪，两者的差异可以用一个例子来说明：
假设当前页面具有大量的图像文件，对于 window.load 方法，必须等到所有关联的图像文件都已经下载完毕后才生效，而 $document.ready() 则在 HTML 下载完毕并已经解析为 DOM 树时便已经生效。
这样看上去貌似 jQuery 的方法要优于原生 Javascript 的处理方法，实际上也的确如此，但对于有些情况下，则必须使用 load 方法才会生效，例如上例中的图像，当我们在代码中需要对图像的长宽属性进行处理时，则需要使用 load 方法来实现，这两种方法应该根据实际需求配合使用。
单页面执行多个脚本
在传统的 Javascript 代码中，我们经常看到将一个函数指定给 DOM 元素的对应属性，例如如下代码：
function myClick() {
//do some stuff here.
&button onclick="myClick();"&click me&/button&
也可以写成这种形式：
document.querySelector('button').onclick = myC
这里写成 myClick 而不是 myClick()，因为前者指的是对函数引用，后者指的是函数执行，前者因为是引用，所以可以再将来被再次调用，而后者则是指页面加载时立即调用执行，不能再被调用。
这样看上去貌似没什么问题，但是如果有两个函数需要指定时就会遇到麻烦，因为 onclick 属性只能保存对一个函数的引用，如果我们写成以下形式：
document.querySelector('button').onclick = myClick1;
document.querySelector('button').onclick = myClick2;
最后代码执行后的效果是 myClick2 会覆盖 myClick1。
而如果我们使用 jQuery 的机制，则能很好地解决这个问题，每次调用 $doucment.ready() 时都会向内部的行为队列添加一个新的函数，当页面加载完毕后，所有的函数都会按顺序执行。
$(document).ready(function() {
$('button').click(function() {
//do myClick1 stuff here.
$('button').click(function() {
//do myClick2 stuff here.
然而实际上现版本的 Javascript 已经引入 addEventListener 方法来解决这个问题：
document.querySelector('button').addEventListener('click', myClick1, false);
document.querySelector('button').addEventListener('click', myClick2, false);
但是考虑到兼容性，jQuery 可以让我们更加轻松地应对这个问题。
解决命名冲突
很多时候，我们需要使用的库不仅仅只有 jQuery，而由于很多库都会采用 $ 来作为标识符，因此就需要一种解决命名冲突的机制。
为了解决这个常见的问题，jQuery 提供了一个 noConflict() 方法，使用该方法后，可以将 $ 的控制权过度给其他的库来使用。假设我们有个 myLibrary 的库，该库也使用 $ 来作为标识符，那么使用方法为：
&script src="myLibrary.js"&&/script&
&script src="jquery.js"&&/script&
jQuery.noConflict();
//write code here.
此时再写 jQuery 方法时就必须采用以下的形式：
jQuery(document).ready(function($) {
//do stuff here.
或者使用简写方式：
jQuery(function($) {
//do stuff here.
这个其实很好理解，即我们将 jQuery 对象本身作为参数传递给回调函数，并且在内部命名为 $，这样在回调函数内部可以自由书写正常的 jQuery 代码。
TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢5996人阅读
web前端开发（92）
解决方案（17）
今天在开发过程中，发现我js文件里面的方法没有响应，后来发现是js在html中引入的位置不对。我在head中加载了js，导致我js中的document.getElementById方法失效。因为html中是按顺序读取运行的，那么head中的js是无法获取后者body中的元素，导致document.getElementById&找不到相应的id对象，自然没法执行之后的方法（function）了。
解决方案：
1、把js文件放在html的最后面。这个方法简单粗暴，但是代码看上去显得有点凌乱，一般我们习惯在head中加载所需的全部js、css等。所以建议用后者方法。
2、在js中的把需要最后执行的代码套一个window.onload = function () {...}
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&js加载问题&/title&
&script type=&text/javascript& src=&button.js&&&/script&
&input type=&button& id=&button& value=&按钮&/&
var button = document.getElementById('button');
button.onclick = function () {
alert(&你点击了一个按钮&);
如果你直接这样写的话，你点按钮是木有用滴。
原因就是在没加载body里面的元素之前，你这个button的id去哪儿找？找不到这个button，谈毛onclick的function函数。
所以，正确的代码如下：
window.onload = function () {
var button = document.getElementById('button');
button.onclick = function () {
alert(&你点击了一个按钮&);
3、如果你用的是jQuery的话，那就是$(document).ready(function(){...})
& & & ps:可以简写为：$(function(){...})
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：98071次
积分：1852
积分：1852
排名：千里之外
原创：86篇
转载：34篇
评论：27条
文章：28篇
阅读：34245
(5)(9)(7)(1)(2)(13)(3)(1)(8)(12)(7)(4)(1)(3)(5)(4)(18)(1)(1)(3)(11)(2)javaScript 页面自动加载事件
来源：易贤网&& 阅读：1962 次&&日期： 15:35:29
温馨提示：易贤网小编为您整理了“javaScript 页面自动加载事件”,方便广大网友查阅！
Window.onload=function(){
Var name=document.getElementById(“name”).val();//加载HTML，并且加载外部所有所有的引用文件（图片，css样式，js等）
方法2：需要引入Jquery的 .js文件
$(document).ready(function(){
alert("JQuery的第一个入门案例");//加载HTML，不需等待，立即加载
方法3： ( 等同于方法2 )
jQuery(function (){
if($("input[name='message']").val()!="")
alert($("input[name='message']").attr("value"));
方法4 ：(等同于上)
$(function (){
alert("JQuery 页面自动加载时执行 1 ....");
方法5-1：window.onload事件的加载(页面加载时同时加载多个函数...)
&body onload="function1(),function2(),function3()"&
function1(){
function2(){
function3(){
方法5-2：window.onload事件的加载(页面加载时同时加载多个函数...)
function1(){
function2(){
function3(){
window.onload=function(){
function1();
function2();
function3();
更多信息请查看
更多信息请查看
【】&&&&&【点此处查询各地各类考试咨询QQ号码及交流群】
易贤网手机网站地址：
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读 & & &
&&& &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这样写可以达到效果：
$('button').click(function()
$('img').slideUp();
这样写，事件就会在加载之后立即发生：
let func = function(temp)
temp.slideUp();
$('button').click(func($('img')));
求解，谢谢！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你这样直接调用
$('button').click(func($('img')));
等价于$('button').click(undefined);//undefined是func的返回值
要达到预想的效果
let func = function(temp)
return function(){
temp.slideUp();
$('button').click(func($('img')));
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
func($("img"))
就是对一个函数的调用，所以执行了。
你的情况是需要在外面套一个function
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：