jquery动态绑定,jquery动态绑定click事件

jquery 动态添加的元素 绑定事件click失效

这就是“为未来元素添加事件”的方法了，

创新互联专注于于田网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供于田营销型网站建设，于田网站制作、于田网页设计、于田网站官网定制、微信平台小程序开发服务，打造于田网络公司原创品牌,更为您提供于田网站排名全网营销落地服务。

jquery里为未来元素添加事件的原理很简单，既然这个元素是未来的，那么我们可以把事件绑定在已经存在的元素上，然后在发生点击的时候，再来判断所点击的对象，是否为我们要的对象，然后再触发事件。

$("div#id").on("click","button.do",function(){

//具体的内容

});

上面这段代码解释起来就是，给div#id绑定一个click事件，并且触发事件的对象为button.do时，开始执行具体的内容。

不管button.do是否为已经存在的，还是未来添加的，都能执行。

对于你的问题，同理就能解决，

$("input[type='checkbox']").click

你的这句，把事件绑定到最近的父元素里，不要绑在离“太远”的父元素上，影响代码的执行效率，

jquery 动态添加节点怎么绑定事件

可以用事件委托，jquery提供on()方法（jquery 1.7.0 以上版本）来委托绑定事件：

ul class="list"

lia href="javascript:;"导航1/a/li

lia href="javascript:;"导航2/a/li

/ul

$('.list').find('a').on('click', function(){

$(this).addClass('active').siblings().removeClass('active');

});

这样.list里通过js动态创建的a节点也能响应click事件。

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动态生成的数据绑定事件

$("button").live("click",function(){

$("p").slideToggle();

});

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

语法

$(selector).live(event,data,function)

参数

event    必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。

data    可选。规定传递到该函数的额外数据。 

function    必需。规定当事件发生时运行的函数。  

jquery ui 里datepicker 怎么使用动态绑定

datepicker是一个配置灵活的插件，我们可以自己定义其展开方式，包括日期格式、语言、限制日期选择范围、添加相关按钮以及其他导航等。

具体步骤：

1.引入jquery．js；

2.引入ui下面的jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.datepicker.js；

3.如果想设置日历为中文形式，需要引入ui－＞i18n下面的jquery.ui.datepicker-zh-CN.js；

4.在HTML中需为input　type＝＂text＂设置ID；

5.写js代码，引入datepicker定义的函数以及各参数的设置。

6.可引入jQuery　ui中相应的样式也可根据自己的需要修改样式。

如果需要显示时分秒：

1.需下载jquery-ui-timepicker-addon.js，并在页面加载；

2.页面添加样式    

.ui-timepicker-div .ui-widget-header { 

margin-bottom: 8px; 

}  

.ui-timepicker-div dl {

text-align: left; 

}  

.ui-timepicker-div dl dt {

height: 25px; margin-bottom: -25px; 

}  

.ui-timepicker-div dl dd {

margin: 0 10px 10px 65px; 

}  

.ui-timepicker-div td {

font-size: 90%; 

}  

.ui-tpicker-grid-label {

background: none; border: none; margin: 0; padding: 0; 

}

3.    $("#date").datetimepicker();／／显示时分秒

$("#datetime").datepicker(); // 显示日期  

$("#datetime").timepicker(); // 显示时分秒 ）

jquery 动态添加行绑定init事件

jQuery的live函数 是用于绑定事件委托的

什么是委托呢? 就是说 把这个事件交给jQuery 由jQuery来负责帮你绑定事件 当被指定绑定的元素增加或删除时,jQuery都会自动的绑定或解除此事件

使用方法:

$("选择元素").live("事件名",事件函数)

示例:

$("tr").live('click',function(){

//函数体

})

这样 当在以后页面动态加入了tr标签后 jQuery会自动为你绑定这个click事件

如果你是自定义事件 只要你是按照jQuery自定义事件定义规则定义的 那么你只需要将live第一个参数改为你的事件名即可