0 0

jquery load方法把一个页面载入到主页面的一个div中,载入页面的javascript消失了5

jquery load方法把一个页面载入到主页面的一个div中,载入页面的javascript消失了

1、index.html里面有两个div,一个是id是menu,另一个是work,代码如下

<html>
<head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="index.js"></script>
</head>

<body>
<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>
</head>

<body>
<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会执行两次事件).
2009年7月20日 23:29

4个答案 按时间排序 按投票排序

0 0

jquery load方法后 重新绑定事件  看这里有http://www.wxc6.com/?p=83

2014年4月26日 11:15
0 0

load.html中html,head,body这些标签是不能出现在div中的
如果load.html的这些标签可以更改的话,简单的就是删除掉,可是看到load.html中的jquery.js被引用,估计是不能删除的,
那可以这样简单的处理,load.html

<html>
<head>
   <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript" src="load.js"></script>
<input type="button" id="btn" value="menu1">
</body>
</html> 

然后重新写你的load方法,改为ajax方法
$.get('load.html',function(data){
data=data.slice(data.indexOf('<body>')+6,data.indexOf('</body>'));
$("#work").html(data);
});

2009年7月25日 22:52
0 0

楼主看下个问题。http://www.iteye.com/problems/21280
不知道怎么解决的。

2009年7月23日 09:18
0 0

把index.js和load.js合并成一个,2个页面共同调用

2009年7月21日 12:46

相关推荐

    用Jquery.load载入页面实现局部刷新

    JQuery提供的.load()方法就是实现局部刷新的一种简便方式,它允许从服务器获取新的数据并把它们插入到当前页面中的指定元素内。 然而,在使用JQuery的.load()方法进行页面局部加载时,有时会发现新加载的页面内容与...

    jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

    这篇文章主要介绍了如何使用jQuery的load()方法,将另一个网页文件中的特定标签内容载入到div标签中,这是通过AJAX技术实现的。 首先,要使用load()方法,需要在页面中引入jQuery库。load()方法是jQuery中AJAX模块...

    jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

    页面载入进度条通常由两个主要部分组成:一个是计算和更新进度的逻辑,另一个是显示进度的UI元素。在jQuery中,我们可以利用`$(window).load()`或`$(document).ready()`事件来监听页面加载状态。`load`事件会在所有...

    用Jquery.load载入页面后样式没了页面混乱的解决方法

    在使用jQuery的`.load()`方法进行页面部分刷新时,可能会遇到一些问题,如样式丢失、页面结构混乱等。这些问题通常是由于不正确的使用方法或者对`.load()`的理解不足导致的。以下将详细介绍这些问题的原因以及如何...

    Jquery方式获取iframe页面中的 Dom元素

    点击链接后,应该会在浏览器中看到一个弹出框,内容是“我是测试页面test”,这表明我们已经成功通过jQuery获取到了iframe中的DOM元素。 需要注意的是,使用jQuery操作iframe中的DOM时,必须确保iframe已经完全加载...

    jquery知识点整理

    jQuery是当前最流行的JavaScript库之一,提供了许多有用的方法和属性来简化Web开发。下面是对jQuery知识点的整理: 基本概念 * jQuery对象:使用$符号来声明jQuery对象,如:`$()`或`jQuery()` * $符号:是jQuery...

    我自己写的可以触发事件,载入其他页面的JS

    标题中的“我自己写的可以触发事件,载入其他页面的JS”指的是一个自定义的JavaScript功能,它可以监听并响应特定的事件,并在事件触发时动态加载外部网页内容。不同于jQuery的`load()`方法,这个功能可能提供了更为...

    jQuery详细教程

    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中: $(document).ready(function(){ --- jQuery functions go here ---- }); 这是为了防止文档在完全加载(就绪)之前运行 jQuery...

    jquery-1.1.3 效率提高800%

    在jQuery 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。...

    jQuery 常见操作实现方式和常用函数方法总结

    - `$("#ID").load("*.html")`:载入一个文件的内容并将其放置到指定的元素中。 ### 事件处理 事件处理是编程中非常重要的概念,它允许程序对用户操作做出响应。jQuery提供了多种方法用于绑定和处理事件: - `$...

    javascript+iframe 实现无刷新载入整页的代码

    jquery有一个load()方法,使用方法如:$(“#div”).load(“/index.html”);这样就可以将index.html加载到ID为div的容器中, 用iframe也可以实现,但没有上述做法完美,参见discuz那些网站,如登陆弹出一个层,也是载入的一...

    jquery&Ajax完美版详细介绍

    - 将jQuery对应的“jquery-x.x.js”脚本文件引入到页面中即可。 - **常用的基础方法:** - **初始化事件:**使用 `$(document).ready(function(){ /* 代码 */ });` 或者 `$(function(){ /* 代码 */ });`。 - **...

    jQuery_EasyUI中文帮助手册

    - 描述:当一个模块及其所有依赖项完全载入完成时触发。 **方法** - **load**: - 参数:`module, callback` - 描述:用于载入特定的模块,并在载入成功后执行回调函数。 - 模块参数支持以下几种类型: - ...

    jQuery 图片浏览放大插件 ZoomImage V1.0.rar

    [removed][removed][removed][removed][removed][removed]调用代码 你所需要做的所有事就是使用jQuery的方式选择一个元素并且调用插件。 $('a.myLinks').zoomimage(options); 可选项 一个哈希参数。所有的参数都是可...

    JavaScript判断页面加载完之后再执行预定函数的技巧

    为了同时处理多个函数,可以编写一个辅助函数addLoadListener,该函数可以添加多个事件处理函数到window的load事件中。这里是一个示例: ```javascript function addLoadListener(fn) { if (typeof window....

    几个比较经典常用的jQuery小技巧

    然后使用jQuery的load()函数,在页面的最后一个元素加载完成后,通过显示加载提示框来通知用户页面已经加载完成。示例代码如下: ```css #loading { position: absolute; z-index: 900; text-align: center; } ``...

    基于ajax实现点击加载更多无刷新载入到本页

    页面上需要有一个用于显示结果的容器,例如`&lt;div id="results"&gt;&lt;/div&gt;`,以及一个“加载更多”按钮,如`&lt;button class="load_more" id="load_more_button"&gt;load More&lt;/button&gt;`。此外,还需要一个加载动画元素,如`...

    jq_facebox实例

    Facebox 是一个基于 jQuery 的插件,它为网页提供了一种优雅的方式来展示图片、HTML 内容以及 AJAX 载入的信息。在本实例中,我们将深入探讨如何使用 Facebox,包括其安装、基本用法、自定义样式以及与 AJAX 结合...

    jquery+ajax+C#实现无刷新操作数据库数据的简单实例

    首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及AJAX交互等任务。Ajax(Asynchronous JavaScript and XML)则是一种在后台与服务器进行数据交换的技术,允许我们在不重新加载整个页面的情况下...

Global site tag (gtag.js) - Google Analytics