jQuery操作动态生成的内容的方法

2024-12-23 18:40:11

本文实例讲述了jQuery操作动态生成的内容的方法。分享给大家供大家参考，具体如下：

由于jQuery是页面一加载获取页面元素的，后期动态生成的元素，通过$("#xxxx")获取不到，需要用原始的js语句来获取：

document.getElementById("xxx").value

对于动态生成的元素，bind绑定的事件也无法触发，需要通过jQuery提供的另外一个方法 .live()

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
 <div class="clickme">Click here</div>
</body>

可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() {
 alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
 alert("Live handler called.");
});

然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素，他依然能够触发事件处理函数。

PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

jQuery中live()方法用法实例

本文实例讲述了jQuery中live()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 特别说明:jQuery1.9已经删除此方法. 语法结构: 复制代码代码如下: $(selector).live(type,data,function) 参数列表: 参数描述 type 定义附加到元素的一个或多个事件类型.由空格分隔多个事件值. data 可选.定义传递到事件处理函数的额外数据. function 定义当事件发生时运行的
深入理解jQuery中live与bind方法的区别

注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间区别一: Click here 可以给这个元素绑定一个简单的click事件: $('.clickme').bind('click', function() {$('body').append(' Another target');}); 当点击了元素,就会弹出一个警告框.然后,想象一下这之后有另一个元素添加进来了. 尽管
浅谈jquery中delegate()与live()

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序例如给id是showspan的div中的span标签添加事件 <div id="showspan"><span>showspan**showspan</span></div> <span>outspan</span> <SCRIPT LANGUAGE="JavaScript"> <!--
jQuery的live()方法对hover事件的处理示例

hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 复制代码代码如下: $('.myDiv').hover(function() { doSomething... }, function() { doSomething... }); 而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候菜单还没加载出来呢,所以就要用到
jquery实现动态操作select选中

今天因为有项目需要动态操作select选中习惯在百度上搜了一下 ,结果还是挺多的.试了其中一个发现不能使用.打开第2,3 个发现都是一样的然后自己稍微研究了一下复制代码代码如下: //初始化select,第一个选中 $('#stoStoreCategoryID').get(0).selectedIndex=0; $("#stoStoreCategoryID option").each(function(i,n){
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式复制
jquery快捷动态绑定键盘事件的操作函数代码

复制代码代码如下: (function($) { $.extend({ key_fn:[], //存放绑定的字符对应的函数 key_code:[], //存放字符 key_bind:function(ch,callback){ var KeyCode = {a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,
jQuery中bind与live的用法及区别小结

首先介绍这两个方法之前,我们常用的是click()方法复制代码代码如下: $("a").click(function() { alert("hello");}); click()方法是bind()方法的一种简单方法.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,都是可以作为type参数传递进来的. 参数:type,[data],function(eventObject)例如: 复制代
js jquery分别实现动态的文件上传操作按钮的添加和删除

javascript实现复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h
jQuery操作动态生成的内容的方法

本文实例讲述了jQuery操作动态生成的内容的方法.分享给大家供大家参考,具体如下: 由于jQuery是页面一加载获取页面元素的,后期动态生成的元素,通过$("#xxxx")获取不到,需要用原始的js语句来获取: document.getElementById("xxx").value 对于动态生成的元素,bind绑定的事件也无法触发,需要通过jQuery提供的另外一个方法 .live() 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()
详解jQuery向动态生成的内容添加事件响应jQuery live()方法

jQuery live()方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: <body> <div class="clickme">Click here</div> &
JQuery操作tr和td内容的方法实例

复制代码代码如下: <PRE class=html name="code"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=g
jQuery实现动态生成表格并为行绑定单击变色动作的方法

本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>jquery表格单击变色</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
jQuery为动态生成的select元素添加事件的方法

项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa
jquery 给动态生成的标签绑定事件的几种方法总结

经常遇到给动态生成的标签绑定事件不好用,自己简单测试总结了下,结论如下了: <body>  <div id="d2"> 生成a标签 </div> <div id="d3"> <input type="button" value="生成a标签" id="btn" /> </div>
jQuery实现页面滚动时动态加载内容的方法

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).hei
jQuery ajax动态生成table功能示例

本文实例讲述了jQuery ajax动态生成table的方法.分享给大家供大家参考,具体如下: $(function(){ ajaxT(); }); function ajaxT(){ $.ajax({ type:"POST", dataType: "json", url:"<%=basePath%>UserInfoServlet", data:"doaction=userList", success:functi
JQuery实现动态添加删除评论的方法

本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
jQuery实现动态给table赋值的方法示例

本文实例讲述了jQuery实现动态给table赋值的方法.分享给大家供大家参考,具体如下: html 请忽视各种class,因为前端用的是layui <table class="layui-table" lay-skin="line" id="datas"> <colgroup> <col width="150"> <col width="200"> <