13518219792
jQuery中用on来绑定事件，常用写法
雨城网站建设公司创新互联建站,雨城网站设计制作，有大型网站制作公司丰富经验。已为雨城千余家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的雨城做网站的公司定做！
两种写法哪个更好？
1. $(document).on 将事件委托document， $('#idname').on 将事件绑定到.className元素上。每次document有点击动作，浏览器都会判断当前点击的对象。如果匹配再决定要不要执行，多了个判断环节。JS渲染效率很高，所以此异同基本可以忽略。
2. $("className").on 为onclick绑定，只有在页面onload时执行一次。页面刷新后，新加载的具有className的元素便没有事件绑定到上面了。相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况：
div
id="testdiv"
ul/ul
/div
假设我们要给ul动态添加的li绑定click事件形成如下结果
div
id="testdiv"
ul
li
name="apple"apple/li
li
name="pear"pear/li
/ul
/div
script
function
test(name){
alert("I'm
"+name);
}
//做法如下:
$("#testdiv
ul").on("click","li",
function()
{
//test($(this).attr("name"));
//do
something
here
});
//主动触发某个li的click事件
//
$("#testdiv
ul
li[name='apple']").trigger("click");
/script
以上这篇jquery
html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
这篇文章主要介绍了jquery移除、绑定、触发元素事件使用示例详解,需要的朋友可以参考下
代码如下:
unbind(type
[,data])
//data是要移除的函数
$('#btn').unbind("click");
//移除click
$('#btn').unbind();
//移除所有
对于只需要触发一次的，随后就要立即解除绑定的情况，用one()
代码如下:
$('#btn').one("click",function(){.......});
触发操作
trigger()
方法触发被选元素的指定事件类型。
代码如下:
$('#btn').trigger("click");
也可以直接执行事件
代码如下:
$('#btn').click();
触发自定义事件
bind()
方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
代码如下:
$('#btn').bind("myclick",function(){....});
模拟触发上面的绑定函数
代码如下:
$('#btn').trigger("myclick");
传递数据trigger(event,[param1,param2,...])
代码如下:
$('#btn').bind("myclick",function(event,message1,message2){...........});
$('#btn').trigger("myclick",["传给message1","传给message2"]);
触发执行默认操作
代码如下:
$("input").trigger("focus");
//不仅会触发input元素绑定的focus事件，还会触发默认操作——得到焦点
只触发绑定事件，不执行浏览器默认操作
代码如下:
$("input").triggerHandler("focus");
//只触发绑定事件，不执行浏览器默认操作
其他用法
绑定多个事件类型
代码如下:
$("div").bind("mouseover
mouseout",function(){.....});
添加事件命名空间
代码如下:
$("div").bind("click.plugin",function(){......});
在所绑定的世界类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
代码如下:
$("div").unbind(".plugin");
//删除空间内的事件
$("div").trigger("click!");
//触发所以不包含在命名空间中的click方法
如果包含在命名空间的也要触发
代码如下:
$(“div”).trigger(“click”);
取消或者绑定函数
代码如下:
$('div').bind('click',
RecommandProduct);//为div绑定RecommandProduct
函数
$('div').unbind('click',
RecommandProduct);//取消RecommandProduct
函数
本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下：
(function
($)
{
//
自定义itemtab事件
$.fn.bind
=
function(types,
data,
fn)
{
//
重载jQuery.fn.bind方法，用来截获绑定自定义事件的元素
if(typeof
types
==
'string'
'itemtab'
==
types)
{
var
itemTouchStart
=
-1;
//
touchstart位置
var
itemTouchMove
=
-1;
//
touchend位置，值为-1时表示未触发
var
itemTriggerDistance
=
0;
//
拖动距离阀值，若大于该值则为拖动列表，若小于等于该值则为点击列表项
var
itemMoved
=
false;
//
列表是否为拖动状态
$(this).bind('touchstart',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemMoved
=
false;
itemTouchStart
=
event.originalEvent.touches[0].pageX;
//
记录起始位置
}).bind('touchmove',
function
(event)
{
if(!event.originalEvent.touches.length)
return
true;
itemTouchMove
=
event.originalEvent.touches[0].pageX;
//
当前拖动位置
//console.log('touchmove:',
itemTouchStart,
itemTouchMove,
itemMoved);
if(Math.abs(itemTouchMove
-
itemTouchStart)
itemTriggerDistance)
{
itemMoved
=
true;
//
列表被拖动
}
}).bind('touchend',
function
(event)
{
//console.log('itemMoved:',
itemMoved);
if(itemMoved)
{
//
列表被拖动过，非点击操作
return
true;
}
$(this).trigger('itemtab');
//
触发自定义事件
});
}
return
this.on(
types,
null,
data,
fn
);
//
这种做法具有侵入性，多个类似的代码会相互覆盖，可采用深度复制方式调用原$.fn.bind方法
}
})(jQuery);
希望本文所述对大家jQuery程序设计有所帮助。
之前就一直受这个问题的困扰，在jQuery1.7版本之后添加了on方法，之前就了解过，其优越性高于live(),bind(),delegate()等方法，在此之前项目中想用这个来测试结果发现，居然动态生成的标签点击了没反应，而live方法却能够支持，于是乎到处查资料，问网友，结果找了好久在一篇文章中终于找到了答案。。。
jQuery
使用on绑定动态生成的元素时，不能直接用该对象操作，而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。
比如页面上有下边两个元素：
input
type="button"
name="addbtn"
value="按钮添加"
/
div
id="test"
/div
使用下边的jQuery代码大家可以对比看看区别：
$(function
()
{
var
a
=
1,
$_div
=
$('#test');
$('input[name=addbtn]').on('click',
function
()
{
$_div.append('input
type="button"
name="test'
+
a
+
'"
value="按钮'
+
a
+
'"/');
a++;
});
//偶数项点击事件
$_div.on('click',
'input[name^=test]:even',
function
()
{
alert('我是有效的on方法,你能看见我吗：'
+
this.value);
});
//奇数项绑定的点击事件
发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').on('click',
function
()
{
alert('我是无效的on方法,你不能看见我');
});
//奇数项绑定的点击事件
发现点击无效，而是用live方法却能够支持
$('input[name^=test]:odd').live('click',
function
()
{
alert('我是live方法,你能看见我吗：'
+
this.value);
});
});
以上所述是小编给大家介绍的jQuery
on()方法绑定动态元素的点击事件的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
