一直以来群里里面很多人反应，在用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. Vue.js学习笔记--2.基础v-指令

    整理自官网教程 -- https://cn.vuejs.org/ 1. v-bind绑定Class与Style a. 绑定Class 语法:v-bind:class="{classname: ...

  2. 移动设备访问使用百度js跳转

    以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.bai ...

  3. [Android]Android Design之Navigation Drawer

    概述 在以前ActionBar是Android 4.0的独有的,后来的ActionBarSherlock的独步武林,对了还有SlidingMenu,但是这个可以对4.0下的可以做很好的适配.自从Goo ...

  4. Microsoft SQL Server学习（二）

    目录 关于数据库的语法: 1.创建数据库 create database 数据库名 on primary (主文件属性(name,filename,size等)) -用逗号隔开次要主要文件和次要文件 ...

  5. 深入理解java虚拟机---垃圾收集器和分配策略-1

    博文重点: 学习目标:哪些内存需要回收 什么时候回收    如何回收 在基于概念讨论的模型中,主要对Java堆和方法区进行讨论. why?:一个接口中的多个实现类需要的内存可能不一样,一个方法中的多个 ...

  6. WebService 生成客户端

    webservice 生成客户端 wsdl2java -encoding UTF-8 -p com.trm -d D:\happywork -client http://localhost/trm-t ...

  7. Vue的模板语法

    基本语法 <body> <script src="vue.js"></script> <div id="app"> ...

  8. Java IO(一)--File类

    File类不是单指文件,它既可以代表一个文件名称,又可以代表一个目录下的一组文件.可以用来创建.删除.遍历文件等 public static void main(String[] args) { St ...

  9. 子例程 subroutine

    #! /usr/bin/perluse strict;use warnings;print "\n---------summation_STDIN_parameter----------\n ...

  10. C#导出word [无规则表结构+模板遇到的坑]

    1)当然可以考虑使用aspose.word.使用书签替换的方案替换模板中对应的书签值. 2)但是我使用了Interop.Word,下面记录使用类及要注意的地方 3)使用类 Report.cs 来自于网 ...