Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

没看懂,稍后再看

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

最近捣鼓JQuery,其中强大的Ajax系列函数令人印象深刻,所以做项目时毫不犹豫地采用了一下该技术,在主页中动态加载分页面进来,咋看效果 不错,都能实现了第一层次的加载,但深入下去问题就出来了:动态加载进来的页面中外联了js文件,其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的)

我郁闷了,打开Firefox中的Firebug查看了加载后的主页面中的DOM,所有元素的加载都是正常的啊~

自己改来改去一个个参数试都过了,在网上也找了半天,都没能解决问题。后来一想,咱把外联的js文件的脚本改成内联试试,一试,Ok了!加载进来的分页面终于能正常执行JQuery的函数!

还有,主页面加载了JQuery库就可以了,分页面是不需要加载库的,因为分页面是集成到主页面的DOM中的,将和主页面共享同一个库脚本。

贴一贴代码,让大家看得明白点:

问题解决前:

(分页面)

<html>
<head>
    <title>AccountPage</title>
    <link href="../Global.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="../js/jquery.min.js"></script>    <!--JQuery库,你懂的-->
       <script type="text/javascript" src="../js/Global.js"></script> 
<!--外联的js文件-->
</head>
<body>   
 <div id="accountPage">
    <a id="modify">修改</a>
 </div>
</body>
</html>

(分页面外联的js脚本)

$(document).ready(function () {

$("#modify").click(function(){

alert("This is alerted from AccountPage !");                            
//分页面加载进主页后,这段代码并

$("#accountPage").append("<a href=‘#‘ >GooodWork</a>");
// 没有按期望运行

});

});

(主页的Ajax加载脚本)

$(document).ready(function () {

$("#account").click(function () {

$("#detail").load(‘component/accountPage.html‘);    })

});

解决后(只改了分页面):

(分页面)

<html>
<head>
    <title>AccountPage</title>
    <link href="../Global.css" rel="stylesheet" type="text/css" />

         <script type="text/javascript">
          {
             $("#modify").click(function(){

                           alert("This is alerted from AccountPage !");  

                           $("#accountPage").append("<a href=‘#‘ >GooodWork</a>"); 

             });     
           }
         </script>

</head>
<body>   
 <div id="accountPage">
    <a id="modify">修改</a>
 </div>
</body>
</html>

其实有点啰嗦了,一句话:要在Ajax加载进来的分页面运行的脚本,不能外联,必须内联!

Only  you~can take me 取西经~~~

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

时间: 2024-10-14 08:53:14

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法的相关文章

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面

通过在jquery中添加函数发送ajax请求来加载数据库数据,以json的格式发送到页面 从数据库中查询仓库信息,显示在下拉菜单中: 首先,引入js插件,这里使用jquery-1.8.3.js <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> 当页面加载完成后,就应该发送ajax请求到数据库,

3、在Ajax于Java的交互过程中,加入加载图片

1.在Ajax于Java的交互过程中,加入加载图片 1.1 html代码 <body> <button id="mybtn">点击</button> <div id="myAjax"> <img src="./img/load2.jpg" id="myimg"> </div> <!-- 模拟等待的图片 --> </body> 1.2

APP中数据加载的6种方式-b

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢? 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数

javascript在html中的加载顺序

参考:[1]http://coolshell.cn/articles/9749.html(酷壳) [2]http://shaozhuqing.com/?p=2756 颜色标注分别来自于链接地址内容 通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染.其它资源的下载).于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行. 因为javascript可能会来操作HTML文档的DOM树,所以

zTree 从数据库中动态加载树形菜单

这几天做动态菜单用到了这个插件,目前用的很广泛的一个开源框架,最新发布的QUI框架就是用这个插件开发的菜单部分,因此还是很值得深入研究和学习,通过使用感觉功能很丰富,好多函数不用自己开发和编写,官网上有很详尽的API可以参考,用着算顺手但学习使用的过程中也遇到了一些困难,听过反复测试和查资料都理解了,但也在思考一个问题,怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程度? 这个不仅仅是一个树形结构的菜单,每个节点左边可以有一个复选框,看了看也挺简单的,只需要在setting里面配置一个ch

iOS APP中数据加载的6种方式

我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢? 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数

jquery mobile中显示加载中提示框和关闭提示框

在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.

在ASP.NET中动态加载内容(用户控件和模板)

在ASP.NET中动态加载内容(用户控件和模板) 要点: 1. 使用Page.ParseControl 2. 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<table width=100%><tr><td width=100% colspan=2 runat=server id=ContainerTop></td></tr><tr><td width=30% runat=server id=Con

vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打包时生成的map文件 在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件 2,vue-router路由懒加载 懒加载的实现方式有很多种,这里简单说三种实现方法 vue异步组件 import() webpack的require.e