一直以来群里里面很多人反应，在用tab加载界面的时候，界面里面的js不会执行。今天在此说明一下原因。

不管是window，dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通过href属性，加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中，是一个很重要的概念，因为很多人没弄明白，所以从中引发出了很多问题。我举个例子来说明html片段。

大家都知道html的标准结构是:

1 <html>
2 <head>
3     <title>这是完整的html结构</title>
4     <script></script>
5 </head>
6 <body>
7 <div>内容</div>
8 </body>
9 </html>

一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。

1 <div>内容</div>

虽然我们也会建立一个文件如b.html来保存html片段，但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。

好了了解html片段的概念，就来说下我在使用个easyui的过程会大量出现的html片段。

其实在使用easyui中你没嵌入iframe的话，除了index界面会有完整的html结构，其他的所有界面都以html片段的形式存在。就那tab来说，首先在界面上定义一个tabs

01 <html>
02 <head>
03 <title>tab测试界面</title>
04 </head>
05 <body>
06 <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
07     <div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div>
08     <div title="Title2" style="padding:10px;">Content 2</div>
09     <div title="Title3" style="padding:10px;">Content 3</div>
10 </div>
11 </body>
12 </html>

看到上面片段的title=”Title1“处我定义了一个tab其中使用了href属性，就表明改此处是要从外部加载一个html片段来显示tab的内容。下面是我定义的tabs_href_test.html的内容

1 <script type="text/javascript" src="test.js"></script>
2 <script>alert("我是外部加载的html片段");</script>
3 <div><p>我是外部加载的html片段</p></div>

test.js的内容：

1 alert("我是外部界面导入的js");

在此肯定会有很多人告诉我，我是这样写的，但是我的js根本就不执行。其实不然，我看到过很多要我解决类是问题的人，发给我看的代码。假如tabs_href_test.html是他们引入的外部界面，都会是如下这样的一个完整的结构

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
04 <title>Tabs - jQuery EasyUI Demo</title>
05   <script type="text/javascript" src="test.js"></script>
06   <script>alert("我是外部加载的html片段");</script>
07 </head>
08 <body>
09   <div><p>我是外部加载的html片段</p></div>
10 </body>
11 </html>

他们都会问他们的js为什么不会执行。其实问题就在这里tabs_href_test.html界面最终其实是jq通过ajax请求过来内容，在append到目标区域。而通过ajax请求方法的responseText又只会抓去完整html片段中<body>里面的内容。正好他们把他们的js写在了body外面所以导致js没执行。这确的写法是在引入的界面当中不要出现<html><head><body>三个标签。因为这只是一个片段，你加载这一个片段只是为了动态嵌入到主界面当中某一个部分显示出来，不是一个完整的页面。

最后总结如果你应该用了easyui中加载外部界面的组件，例如：panel,window，dailog,tabs等。请确保你引入的界面是一个html片段。html片段正确的写法再次提醒不要出现<html><head><body>三个标签：

一直以来群里里面很多人反应，在用tab加载界面的时候，界面里面的js不会执行。今天GodSon在此说明一下原因。

不管是window，dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通过href属性，加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中，是一个很重要的概念，因为很多人没弄明白，所以从中引发出了很多问题。我举个例子来说明html片段。

大家都知道html的标准结构是:

1 <html>
2 <head>
3     <title>这是完整的html结构</title>
4     <script></script>
5 </head>
6 <body>
7 <div>内容</div>
8 </body>
9 </html>

一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。

1 <div>内容</div>

虽然我们也会建立一个文件如b.html来保存html片段，但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。

好了了解html片段的概念，就来说下我在使用个easyui的过程会大量出现的html片段。

其实在使用easyui中你没嵌入iframe的话，除了index界面会有完整的html结构，其他的所有界面都以html片段的形式存在。就那tab来说，首先在界面上定义一个tabs

01 <html>
02 <head>
03 <title>tab测试界面</title>
04 </head>
05 <body>
06 <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
07     <div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div>
08     <div title="Title2" style="padding:10px;">Content 2</div>
09     <div title="Title3" style="padding:10px;">Content 3</div>
10 </div>
11 </body>
12 </html>

看到上面片段的title=”Title1“处我定义了一个tab其中使用了href属性，就表明改此处是要从外部加载一个html片段来显示tab的内容。下面是我定义的tabs_href_test.html的内容

1 <script type="text/javascript" src="test.js"></script>
2 <script>alert("我是外部加载的html片段");</script>
3 <div><p>我是外部加载的html片段</p></div>

test.js的内容：

1 alert("我是外部界面导入的js");

在此肯定会有很多人告诉我，我是这样写的，但是我的js根本就不执行。其实不然，我看到过很多要我解决类是问题的人，发给我看的代码。假如tabs_href_test.html是他们引入的外部界面，都会是如下这样的一个完整的结构

01 <html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
04 <title>Tabs - jQuery EasyUI Demo</title>
05   <script type="text/javascript" src="test.js"></script>
06   <script>alert("我是外部加载的html片段");</script>
07 </head>
08 <body>
09   <div><p>我是外部加载的html片段</p></div>
10 </body>
11 </html>

他们都会问他们的js为什么不会执行。其实问题就在这里tabs_href_test.html界面最终其实是jq通过ajax请求过来内容，在append到目标区域。而通过ajax请求方法的responseText又只会抓去完整html片段中<body>里面的内容。正好他们把他们的js写在了body外面所以导致js没执行。这确的写法是在引入的界面当中不要出现<html><head><body>三个标签。因为这只是一个片段，你加载这一个片段只是为了动态嵌入到主界面当中某一个部分显示出来，不是一个完整的页面。

最后总结如果你应该用了easyui中加载外部界面的组件，例如：panel,window，dailog,tabs等。请确保你引入的界面是一个html片段。html片段正确的写法再次提醒不要出现<html><head><body>三个标签：

 
 
 
1 <script type="text/javascript" src="test.js"></script>
2 <link ref="css"/>
3 <style>还可以写点样式</style>
4 <script>alert("我是外部加载的html片段");</script>
5 <div><p>我是外部加载的html片段</p></div>

【转】关于easyui tab 加载 js ajax 不走后台的问题， 怕找不到 以防万一的更多相关文章

  1. jquery easyui tab加载内容的几种方法

    转:http://my.oschina.net/u/2331760/blog/391937?fromerr=saqeoxxB jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页 ...

  2. EasyUI之加载js文件顺序

    在使用EasyUI时,需要引用EasyUI框架的js文件,要注意加载的顺序,jquery.min.js一定要第一个被加载.

  3. easyui tab 加载iframe 高度问题

    其实按网上搜的结果,easyui 有个data-options属性是fit:true. 加上他之后会使得自适应父类的宽高. 加上之后,发现个问题,当刷新tab内容的时候高度是对的,但是新建tab的时候 ...

  4. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  5. easyui的tab加载页面中的form重复提交

    http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者win ...

  6. （转）高性能JavaScript：加载和运行（动态加载JS代码）

    浏览器是如何加载JS的 当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面.如果需要 ...

  7. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  8. 动态加载JS脚本的4种方法

    实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...

  9. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

随机推荐

  1. CCF|最小差值|Java

    import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = ...

  2. SQLServer性能优化专题

    SQLServer性能优化专题 01.SQLServer性能优化之----强大的文件组----分盘存储(水平分库) http://www.cnblogs.com/dunitian/p/5276431. ...

  3. vue2.0 v-model指令

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. [转] 一个U盘病毒简单分析

    (转自:一个U盘病毒简单分析 - 瑞星网   原文日期:2014.03.25) U盘这个移动存储设备由于体积小.容量大.便于携带等优点,给人们的存储数据带来了很大的便利.但正是由于这种便利,也给病毒有 ...

  5. C++ class、struct区别

    一.默认访问控制不同(最主要) struct默认为public,class默认为private.这个访问控制既是指成员的默认访问属性,又指继承时默认的继承属性. 二.定义template时不同 在模版 ...

  6. reading from files

    如果有图会很好理解,最近太忙,以后再加吧 #首先有一个需要读取的文件名列表 #然后将文件名列表通过函数string_input_producer放进文件名队列. #有时候因为数据量太大,需要把他们放进 ...

  7. [CodeForces]1059D Nature Reserve

    大意:给你一个平面上N(N<=100000)个点,问相切于x轴的圆,将所有的点都覆盖的最小半径是多少. 计算几何???Div2的D题就考计算几何???某人昨天上课才和我们说这种计算几何题看见就溜 ...

  8. CAD参数绘制对齐标注（com接口）

    主要用到函数说明: _DMxDrawX::DrawDimAligned 绘制一个对齐标注.详细说明如下: 参数 说明 DOUBLE dExtLine1PointX 第一条界线开始点X值 DOUBLE ...

  9. 【leetcode-03】给定一个字符串，请你找出其中不含有重复字符的最长子串的长度

    开个新坑,leetcode上面做题目.下面是题目描述: <!-- 给定一个字符串,请你找出其中不含有重复字符的最长子串的长度. 示例 1: 输入: "abcabcbb" 输出 ...

  10. 第2节 hive基本操作：12、hive当中的hql语法

    3.2. hive查询语法 3.2.1.SELECT https://cwiki.apache.org/confluence/display/Hive/LanguageManual+Select 基本 ...