`
hyshucom
  • 浏览: 810474 次
文章分类
社区版块
存档分类
最新评论

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>');

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


参考：http://my.oschina.net/u/135304/blog/31612


分享到：
| ICS SIP Call移植
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery动态按钮

    Jquery动态按钮，支持动态影子，反光，镜子效果等，实现简单，使用Css动画实现

    jquery动态控制表格的行

    动态控制表格 增加行、选中行、删除行 直运行

    jquery生成的进度条

    多种示例，通过不同的方式，实现不同的进度条，有些根据后台进行动态控制

    使用jquery.qrcode生成彩色二维码实例

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件，用它来实现二维码图形渲染支持canvas和table两种绘图方式。（jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形，这个需要注意。）...

    jQuery+bootstrap可视化表单拖拽编辑，自定义拖拽设计表单

    代码简介：jQuery可视化表单拖拽编辑代码是一款基于jQuery和bootstrap框架制作可视化表单，可自定义拖拽控制生成表单，预览表单，表单各种属性可通过json格式的配置来处理控制表单的各个属性，看起来非常的高大上，...

    jQuery可控制雪碧图sprites插件.zip

    jQuery可控制雪碧图sprites插件是一款可以控制雪碧图播放，暂停，反向播放和更改播放动画速度等。

    基于jquery bootstrap样式百分比进度条

    基于jquery 完美结合bootsrap样式，动态生成百分比横向图表

    最新jquery.1.8.1

    在jQuery 1.8.1中，可以采用无前缀的属性名，并自动生成适合当前浏览器的前缀。例如，在Chrome中，jQuery调用$("#myscroll").css("marquee-direction", "backwards")将设置为“-webkit-marquee-direction: backwards...

    超实用的jQuery代码段

    7.15 动态表单生成图片预览 7.16 平滑滚动的导航菜单 7.17 图片的放大预览 7.18 实现平滑的图片动态缩放效果 7.19 自动适应的窗口背景 7.20 如何判断加载多张图片的完成状态 7.21 鼠标悬停时的图片放大 7.22 淡出...

    jQuery在线选座(影院版)

    jquery.seat-charts是一款适合电影票、高铁票的在线选座插件,支持自定义样式，支持设置座位状态，并且支持键盘控制座位。 接下来我们定义好票价、座位区、票数、总计金额等，然后调用插件生成座位区：$('#seat-map')...

    jquery控制显示服务器生成的图片流

    主要介绍了jquery控制显示服务器生成的图片流,需要的朋友可以参考下

    最新JQuery版本1.8

    在jQuery 1.8中，可以采用无前缀的属性名，并自动生成适合当前浏览器的前缀。例如，在Chrome中，jQuery调用$("#myscroll").css("marquee-direction", "backwards")将设置为“-webkit-marquee-direction: backwards”...

    jquery图片图层展开收缩效果.rar

    jquery图片图层展开收缩效果，鼠标点击两个图片中间线条上的控制按钮，所在的图片区域会向右展开，再次点击则向左复位，也就是重新收回了，这种滑动的效果在jquery的优化下，非常的平滑流畅，用jquery实现这种效果...

    java 代码生成 权限控制 数据字典 菜单管理 项目源码

    java 代码生成 权限控制 数据字典 菜单管理 此工程为项目源码，供大家学习使用，可以提高开发效率，增删改查一些重复的工作就不用做了 采用SpringMVC + Mybatis + Ehcache + Jquery + Boostrap + treetable + ztree ...

    jQuery EasyUI中DataGird动态生成列的方法

    DataGird动态生成列，实际上就是控制DataGird的 columns 属性值，下面通过ajax异步调用后台columns的数据，进行绑定。 &lt;table id=dg&gt;&lt;/table&gt; [removed] function easyUIDataGrid(medid) { var $datagrid = {}; var...

    可生成自动滚动背景图像的jQuery插件

    jQuery.AutoBackgroundScroll.js是一款可以生成自动滚动背景图像的轻量级jQuery插件。该插件可以使背景图片连续无缝的滚动，你可以控制背景图片滚动的方向，滚动速度等参数。

    jQuery 实现网页整屏横向、纵向滚动切换特效.rar

    jQuery 控制网页整屏横向、垂直滚动切换，意思是，它与Tab大体上类似，但是TAB只控制某个Division标签，这一个控制的是整个网页，点击...感觉非常大气，这也是jquery生成网页动画最强大的地方，示例运行图如上所示。

    jquery和CSS3圆形倒计时特效

    这是一款jquery和CSS3圆形倒计时特效。该特效使用CSS对页面进行布局，生成用于倒计时的圆环，然后通过jquery代码来控制圆环的倒计时进度。

    jQuery插件PogoSlider.zip

    Pogo Slider 是一个 jQuery 插件，它能允许你穿件一个动画图像／内容滑块。幻灯片之间的过渡则使用CSS 动画。同时 Pogo Slider 不会生成任何导航按钮。它提供了一个简单的 api 来控制滑块，创建您自己的按钮时，...

    jquery js+php+html5+css3分页栏生成及数据取出代码

    《js分页栏生成及数据取出》 使用方法说明 使用jquery php html5 css3来编写的js分页代码，方便大家进行稍加修改之后应用与自己的web页面或者站点。 如果需要观看demo可以查看: http://sunshine.ztime.net 一个...

Magicbox
Global site tag (gtag.js) - Google Analytics