jQuery获取动态产生的html内标签或元素
下午分享《MVC编辑状态两个DropDownList联动》http://www.cnblogs.com/insus/p/3426563.html 不久,马上有网友问及三级联动的例子。Insus.NET回复他,会做二级联动,三级应该不难。原理与方法是一样的。
写此篇的目的,还是处理jQuery怎样获取动态产生后的html的标签或是元素。
还是先回过头去看篇头指定的链接的文章。一开始时,Insus.NET使用了jQuery的ajax产生了一数据行,并append至
<tbody id="tbody1"></tbody>
但是,在后续的jQuery是很难找到append的html的标签或元素。为了能找到两个select下拉列表,Insus.NET当时只能把相关的代码都写在
function OutputData(tbody, item) {}
这个自定义函数内。
这一直不是Insus.NET想要的。不太喜欢把什么代码均写在一个函数内,这样日后的维护带来相当大的困惑。当时完成它时,只求功能的实现。现在,Insus.NET决定再重构这部分。尽量把它能抽取的或是拆分的,都抽取和拆分成更细小,单独的函数。
第一个可以抽取的是联动有事件:
把它拿掉,并移出这个自定义函数外:
那change函数需要改为#93行的语法,另外事件中需要获取两个select的下拉列表,也需要分别改为#96和#98行,一个获取控件之后,还要获取其值,另一个仅是获取控件。
第二个可移动的地方,是那个更新的数据的部分代码:
可以写在一个单独立的
$(document).ready(function () {}
代码有变动的地方,可参考下图高亮部分:
经这样重构之后,能脱离这个函数的代码,均移至
function OutputData(tbody, item) {}
这个自定义函数外。
重构之后,此视图完整代码:
jQuery获取动态产生的html内标签或元素的更多相关文章
- jQuery获取动态添加的元素,live和on的区别
今天给大家说一下如果用jQuery获取动态添加的元素,通常如果你在网页上利用jQuery添加一个元素,那么用平常的jQuery获取元素的方法无效的获取不到的.可以用以下的方法获取动态元素!假设我们现在 ...
- jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)
jQuery获取Select选择的Text和Value: 语法解释: . $("#select_id").change(function(){//code...}); //为Sel ...
- jQuery获取table表中的td标签
首先我来介绍一下我遇到的问题 1.当有一个table表包含了<tr>标签,<td>标签,大致可以认为是这样的: <tr> <td> @scene.ID ...
- jQuery获取动态生成的元素
需求描述:页面上可以动态添加数据,比如table,点击按钮可以动态添加行.又或页面 加载时table数据是通过ajax从后台获取的.而这时我们想要获取其中的某个值,又该如何获取呢? 如果是要通过某个事 ...
- 记录--jquery 获取父级、子级、兄弟元素 + 实例
需求如下: 三条数据,需点击其中一条数据在其下面展示与此数据关联的图片.主要功能可能是在点击的数据下增加显示行 思路: 把需要点击增加的数据先隐藏.点击后再将其显示出来. 知识点: jQuery.pa ...
- Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能 先到官网(http://plugins.jquery.com/cookie/ )下载coo ...
- 关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配。”的解决办法
关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()
- jquery获取节点的时候获取包含自己在内的HTML标签
jquery获取某个标签的html()方法的时候总是只能获取内部的 如果获取包含自身的HTML代码呢? 用.prop("outerHTML")方法获取 <div id=&qu ...
- Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据
关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...
随机推荐
- Android-Java-对象在内存中的简单关系图
代码案例一: package android.java.oop02; class Student { public int age; public String name; public void s ...
- Week Plan:强介入性的效率导师[转]
做产品有三重境界,以效率工具这一细分领域为例: 第一重——发现用户需求,如 Fleep,敏锐地发现团队协作中的关键——聊天,围绕这一需求做足文章; 第二重——预见用户需求,如 ProcessOn,在以 ...
- Spark技术的总结 以及同storm,Flink技术的对比
spark总结 1.Spark的特点: 高可伸缩性 高容错 基于内存计算 支持多种语言:java,scala,python,R 高质量的算法,比MapReduce快100倍 多种调度引擎:可以运行于Y ...
- dotnet core瘦身发布
需要安装nuget包Microsoft.Packaging.Tools.Trimming然后利用如下命令发布dotnet publish -r win10-x64 -c release --self- ...
- 关于ajax访问webservice查询数据量稍微大一点,就会返回error500的解决方案
只需要在web.config的configeration节点中增加如下子节点即可: <system.web.extensions> <scripting> ...
- POJ 2442(优先队列 k路归并 堆)
Description Given m sequences, each contains n non-negative integer. Now we may select one number fr ...
- 【ElasticSearch】:elasticsearch.yml配置
ElasticSearch5的elasticsearch.yml配置 注意 elasticsearch.yml中的配置,冒号和后面配置值之间有空格 cluster.name: my-applicati ...
- D17——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D17 20181014内容纲要: 1.jQuery介绍 2.jQuery功能介绍 (1)jQuery的引入方式 (2)选择器 (3)筛选 (4)文本操作 (5) ...
- WebSocket集成XMPP网页即时通讯1:Java Web Project服务端/客户端Jetty9开发初探
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- [Leetcode]303.区域和检索&&304.二维区域和检索
题目 1.区域和检索: 简单题,前缀和方法 乍一看就觉得应该用前缀和来做,一个数组多次查询. 实现方法: 新建一个private数组prefix_sum[i],用来存储nums前i个数组的和, 需要找 ...