jquery on()绑定的点击事件在js动态新添加的元素上无效，请问为什么

JavaScript053

jquery on()绑定的点击事件在js动态新添加的元素上无效，请问为什么,第1张

$('.class').on("click",function(){……})相当于$('.class').bind("click",function(){……})

$(document).on("click",'.class',function(){……})相当于$('.class').live("click",function(){……})

js生成的元素绑定事件必须使用live，但新版的jq，已经淘汰了live，可以用on方法代替，但必须注意写法。

区别：

onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么

click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。如上诉代码所示，当点击'btn4'按钮时,会触发'btn3'的onclick事件(正常来说得按'btn3'按钮才触发'btn3'的onclick事件)，原因就是因为

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

$("#btn3").click()

})

点击'btn4'按钮时,代码内部调用了'btn3'的click()方法，从而触发了'btn3的onclick事件。

2.click()方法的主要作用是触发调用click方法元素onclick事件。此外，如果在click方法定义了如下代码

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

alert("*****")

})

click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用。实例如下

Html代码

<script type="text/javascript">

$(function(){

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

alert("aa")

})

})

function change(){

alert("bb")

}

</script>

<button id="btn3" onclick="change()">dd</button>

弹出框的弹出顺序先是'bb',然后是'aa'.

1、纯JavaScript的写法：onclick的参数一般是从Dom元素中获取，比如获取input元素中的value值作为参数，在JavaScript中调用onclick的方法传参时都这么写：

<input type="text" id="input1" value="1111" onclick="getValue(this.vale)">  

然后我们定义一个getValue的方法即可：

function getValue(val){alert(val)}

另外一种不传参数<input type="text" id="input1" value="1111">  (注意没有onclick事件了)

document.getElementById(input1).onclick = function(){ alert(this.value) }

第一种传参的方法是JavaScript函数，所以在Jquery本身就是JavaScript的函数类库，所以这种也是可以使用的，同时在该方法里面可以使用Jquery类库，比如：

function getValue(val){

    alert(val)

    $('#input1').css('background','red')//Jquery实现

    document.getElementById('input1').style.background= 'red'//纯JavaScript实现

    

 }

第二种是给DOM元素添加点击事件，通过获取DOM元素的属性值达到第一种传参效果，Jquery一般都是使用这种方法。

2、Jquery的做法是不传参，而是给DOM元素添加点击事件，从而获取DOM的属性值，到达，纯JavaScript传参效果。所以Jquery的写法为<input type="text" id="input1" value="1111">：

$('#input1').click(function(){

    alert($(this).val())  

})