demo:http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html
我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是
在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件。
js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。
常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。
<table>
<tbody>
<tr>
<td>这行原来就有</td>
<td><button class="del">删除</button></td>
</tr>
<tr>
<td>这行原来就有</td>
<td><button class="del">删除</button></td>
</tr>
</tbody>
</table>
通常,我会这么绑定
-
jQuery(function($) {
-
//已有删除按钮初始化绑定删除事件
-
$(".del").click(function() {
-
$(this).parents("tr").remove();
-
});
-
});
对于在domready之前就存在的删除按钮,一切都很完美。但如果在domready之后用js动态添加几行,那新增的几行中的这些按钮都将失去任何作用。
如何解决这个问题?以下提供4种解决方案:
=============================
0号解决方案——onclick法
如果不顾结构与行为分离的准则的话,通常,我会这么做。
注意,此时的deltr这个function必须是全局函数,得放jQuery(function($) {})外面,放里边就成局部函数了,html里的onclick就调用不到了!
-
<td><button onclick="deltr(this)">删除</button></td>
-
jQuery(function($){
-
//添加行
-
$("#add2").click(function(){
-
$("#table2>tbody").append('<tr><td>新增行</td><td><button nclick="deltr(this)">删除</button></td></tr>')
-
});
-
});
- //删除行的函数,必须要放domready函数外面
-
function deltr(delbtn){
-
$(delbtn).parents("tr").remove();
-
};
=============================
1号解决方案——重复绑定法
即,在domready的时候就给已有的元素绑定事件处理函数,
而后当新增加的元素的时候再次绑定。
-
<td><buttonclass="del">删除</button></td>
-
jQuery(function($){
-
//定义删除按钮事件绑定
-
//写里边,防止污染全局命名空间
-
function deltr(){
-
$(this).parents("tr").remove();
-
};
-
//已有删除按钮初始化绑定删除事件
-
$("#table3 .del").click(deltr);
-
//添加行
-
$("#add3").click(function(){
-
$('<tr><td>新增行</td><td><button class="del">删除</button></td></tr>')
-
//在这里给删除按钮再次绑定事件。
-
.find(".del").click(deltr).end()
-
.appendTo($("#table3>tbody"));
-
});
-
});
=============================
2号解决方案——事件冒泡法
利用事件冒泡的原理,我们给这个按钮的祖先元素绑定事件处理函数。
然后通过event.target这个对象来判断,这个事件是不是我们要找的对象触发的。
通常可以利用一些DOM属性,比如event.target.className、event.target.tagName等之类的来判断。
-
<td><buttonclass="del">删除</button></td>
-
jQuery(function($){
-
//第四个表格的删除按钮事件绑定
-
$("#table4").click(function(e) {
-
if (e.target.className=="del"){
-
$(e.target).parents("tr").remove();
-
};
-
});
-
//第四个表格的添加按钮事件绑定
-
$("#add4").click(function(){
-
$("#table4>tbody").append('<tr><td>新增行</td><td><button class="del">删除</button></td></tr>')
-
});
-
});
相关推荐
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类,搜索框输入文字键盘回车绑定提交搜索按钮代码。 dropdown-toggle search-select" data-toggle="dropdown">百度搜索 ...
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧,需要了解的朋友可以参考下
JQuery绑定事件 Js实现 需要理解的可以下载
jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4): 分类 事件方法 描述 鼠标 click() 单机鼠标左键时触发 dbclick() 双击鼠标左键时触发 键盘 keypress() 键盘按键(Shift、CapsLock等非字符...
主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
今天上午对checkbox相关事件整合了下,运用jquery相关知识,整理table中隔行换色,选中变色,全选,反选等操作,并且对table动态添加行进行了相关整理。
我当时的处理方法是在添加的时候手工绑定事件处理函数。不过新版的jquery已经添加了这个功能。我们已经不需要为此烦恼了。 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的...
1.首先,我们来看一下经常使用的添加事件的方式: <input type=button id=btn value=click me! onclick=shao(); /> [removed] function shao() { alert(...当页面加载完成后,来执行fun
jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
主要介绍了jQuery实现给input绑定回车事件的方法,结合实例形式分析了2种常用的事件绑定操作技巧,需要的朋友可以参考下
主要为大家详细介绍了多种jQuery绑定事件的实现方式,分享了jQuery防止重复绑定事件的解决方法,感兴趣的小伙伴们可以参考一下
jquery绑定click事件传递参数
原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click...
jquery 监听 键盘 事件
JQuery绑定事件四种实现方法解析 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery...
本文实例讲述了jquery单选框radio绑定click事件实现方法。分享给大家供大家参考。 具体实现方法如下: 代码如下:<html> <head> <title>单选框radio绑定click事件</title> <meta ...
jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件...