jQuery绑定事件on

jQuery中用on来绑定事件，常用写法

雨城网站建设公司创新互联建站,雨城网站设计制作，有大型网站制作公司丰富经验。已为雨城千余家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的雨城做网站的公司定做！

两种写法哪个更好？

1. $(document).on 将事件委托document， $('#idname').on 将事件绑定到.className元素上。每次document有点击动作，浏览器都会判断当前点击的对象。如果匹配再决定要不要执行，多了个判断环节。JS渲染效率很高，所以此异同基本可以忽略。

2. $("className").on 为onclick绑定，只有在页面onload时执行一次。页面刷新后，新加载的具有className的元素便没有事件绑定到上面了。相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。

jquery html动态添加的元素绑定事件详解

在实际开发中会遇到要给动态生成的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移除、绑定、触发元素事件使用示例详解

这篇文章主要介绍了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实现获取绑定自定义事件元素的方法

本文实例讲述了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程序设计有所帮助。

jQuery on()方法绑定动态元素的点击事件实例代码浅析

之前就一直受这个问题的困扰，在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()方法绑定动态元素的点击事件的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

网站名称：jquery绑定元素,jq找到指定元素
链接分享：http://azwzsj.com/article/dsdpcpp.html