WEB程序开发中,对于使用jQuery生成的新元素或新添加的元素,经常需要用jQuery对新建的元素绑定click事件。由于默认的
click事件是不起作用的,必须给新生成的元素进行click事件绑定。这几天由于项目需要,通过使用jQuery生成新元素,同时给新元素绑定
click事件和change事件,经过项目实践,我总结一下相关知识,通过使用最简单的方法,实现jQuery绑定click事件,供参考。
HTML代码如下:
<form>
<div id=”newElement
“></div>
<input type=”button” value=”生成新元素” id=”createElement
” />
</form>
Javascript代码如下:
$(document).ready(function(){
$(”#createElement
“).click(function(){
//统计当前页面中使有以newButton_开头的元素个数,生成ID
id
= $(”[id^='newButton_
']“).size()+1;
//生成新元素,追加到ID值为newElement的元素中
$(box.getButton(id)
).appendTo($(”#newElement
“));
//绑定click事件,其它change事件类似
$(”#newButton_”+id
).click(function(){
box.getClick();
});
});
});
//生成一个对象盒子,面向对象思想,封装我们的函数,强烈推荐这种方法
var box = {};
box.getButton
= function(id){
return ‘<input type=”button” value=”新按钮” id=”newButton_’+id+
‘” /><br />’;
//返回任何你需要生成的新元素
}
box.getClick
= function(){
alert(’事件生效啦!你点击了新按钮’);
//添加任何你需要的代码
}
效果图如下:
其实过程很简单,可分为三个步骤,总结一下:
第一步:生成新元素;
如:$(box.getButton(id)
).appendTo($(”#newElement
“));
第二步:对需要绑定事件的新元素进行click事件绑定,
注意:新元素的ID是唯一的,这样才能正确绑定;
如:$(”#newButton_”+id
).click(function(){ box.getClick();
});
第三步:绑定什么click事件,事件的具体代码;
如:box.getClick
= function(){ alert(’事件生效啦!你点击了新按钮’); }
使用jQuery给javascript生成的新元素绑定click事件方法还很多,这里只是介绍其中一种,个人觉得这种jQuery绑定click事件方法是最有效的而且代码精简,感觉也很舒服,推荐!
分享到:
相关推荐
主要介绍了JQuery调用绑定click事件的3种写法,本文简洁清晰的给出3种写法的代码示例,可以很方便的复制使用,需要的朋友可以参考下
jquery绑定click事件传递参数
原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法; 解决办法更改绑定方法为: $("#sdfsd").unbind(...在绑定新click方法前对元素所绑定的click方法解绑
主要介绍了JQuery给元素绑定click事件多次执行的解决方法,需要的朋友可以参考下
本文实例讲述了jquery单选框radio绑定click事件实现方法。分享给大家供大家参考。 具体实现方法如下: 代码如下:<html> <head> <title>单选框radio绑定click事件</title> <meta ...
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧,需要了解的朋友可以参考下
jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类,搜索框输入文字键盘回车绑定提交搜索按钮代码。 dropdown-toggle search-select" data-toggle="dropdown">百度搜索 ...
jquery生成二维码、jquery生成带LOGO的二维码,jquery生成二维码并将二维码保存到照片中
jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4): 分类 事件方法 描述 鼠标 click...
jquery生成海报图片,可自定义图片大小
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是...需要给里面动态添加的标签添加click事件 jquery 1.7版以前使用live
本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考,具体如下: (function ($) { // 自定义itemtab事件 $.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法,用来截获...
下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
JQuery绑定事件 Js实现 需要理解的可以下载
$("a[name='del']").click(function(){ Ext.Msg.confirm('提示','你确定要删除该公告吗?',function(button,text){ if(button=='yes'){ [removed].href="/admin/note!delete.action?id=${id}"; } }); }); $...
主要介绍了jQuery取消特定的click事件实现方法,结合实例形式分析了jQuery简单实现事件绑定及取消事件绑定的相关技巧,需要的朋友可以参考下