怎么给jquery添加的元素添加事件

有2种方法：

最简单的方法就是直接在标签中写onclick=""，但是这样写其实是有点low的，

第二种方式是通过给类名绑定一个事件。

<p id="pLabel">新加一条</p>

<ul id="ulLabel">

 <li class="liLabel">aaa1</li>

 <li class="liLabel">aaa2</li>

 <li class="liLabel">aaa3</li>

</ul>

<script type="text/javascript">

$("#pLabel").click(function(){

 $("#ulLabel").append('<li class="liLabel">aaaQ</li>') //动态像ul的末尾追加一个新元素

})

</script>

方法一：使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如，通过脚本动态创建的元素。

$('.liLabel').live('click', function(){

 alert('OK')

})

方法二：使用on

可以通过on方法绑定事件，可以绑定到它的父级或者body中，实现如下：

$("#ulLabel").on('click','.liLabel',function(){

 alert('OK')

})

或者：

$("body").on('click','.liLabel',function(){

 alert('OK')

})

注意绑定的事件，需要绑定在父元素。

在实际开发中会遇到要给动态生成的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里为未来元素添加事件的原理很简单，既然这个元素是未来的，那么我们可以把事件绑定在已经存在的元素上，然后在发生点击的时候，再来判断所点击的对象，是否为我们要的对象，然后再触发事件。

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

    //具体的内容

})

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

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

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

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

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

---