多个相同class节点绑定同一事件

案例: 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
<div id="div1">内容</div> 
问题: 
$("div1").bind("click",function(){ 
     alert($(this).val()); 
}); 
我们绑定到了div1,当我们点击div时,只有第一个div 弹出了alert了,其它的都没有弹出。 
目标: 
    想了每一个div都绑定一个事件 
解决: 
$("div1").live("click",function(){ 
     alert($(this).val()); 
}) 
以下绑定事件方法的区别: 
    bind:为每个匹配元素的特定事件绑定事件处理函数; 
    live:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效;

时间: 2024-07-30 10:03:02

多个相同class节点绑定同一事件的相关文章

关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案

1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 解决方案:event.preventDefault();//阻止浏览器默认事件即可 2.阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效,这是一个很坑爹的地方,如果你的活动dom节点占据了整块屏幕,也就是说你的页面上下动不了了: 解决方案:设置两个开关,分别对应左右滑动和上下滑动

随笔一个dom节点绑定事件

以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的html内容. button点击事件:会生成一个li节点. 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <ul class="ul

JS(原生)事件委托:为动态创建的节点绑定事件

项目开发中经常需要为动态创建的节点绑定事件, 比如需要创建一个动态列表:在li的数量非常少的时候,为每一个li绑定事件不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(假设),为每个li绑定事件就会对页面性能产生很大的影响.当有大量元素需要绑定相同事件的时候可采用事件委托,将在目标元素上要处理的事件委托给父元素或者祖先元素 优点    事件委托对于web应用程序的性能有如下几个优点:    1.需要管理的函数变少了    2.占用的内存少了    3.javascrip

用live()方法给新增节点绑定事件

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效.鹤峰县烟草专卖局 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: 1 <body> 2     <div class="clickme">Click here</div> 3 </body> 可以给这个

jquery 给一个节点绑定事件总结

//给输入框绑定事件   key = $("#key");   key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);   key.bind('keydown', function (e){if(e.which == 13){searchNode();}});      setT

AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定

一.DI-控制器参数 $scope - 在js和html之间传递数据 - 仅在控制器作用域内有效 $element - 是一个jQuery对象 - 作用域控制器所在的html元素 - 在js中,通过$element获取DOM对象 - var e = $element.children().eq(0); - $scope.w = e.width(); - $scope.h = e.height(); $http - http协议请求 - $http.get(url).success(functio

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li