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

怎么给jquery添加的元素添加事件,第1张

有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')

})

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

如果是把点击事件绑定到label标签上,那肯定就是这种情况的,因为单选框的选中事件肯定是发生在label标签的点击事件发生之后的,所以label的点击事件是无法实时捕捉到单选框被选中后的值的。之所以会触发两次,是单选框的值改变后会产生事件冒泡,让上级的label标签再次触发事件。

解决办法可以通过事件委托,放过第一次触发,然后冒泡后的再来处理。但是,我更希望你换一种思路,不要只盯着label的点击事件,你可以考虑下利用单选框的change事件,也就是说只要单选框的选中状态发生改变就进行处理,这样当你点击label时单选框选中也会触发change事件的,而且不用担心会执行两次了。类似这样:

$( ".zy_time label input:radio" ).change( function () {

console.log('哈哈')

} )

直接获取label对应的input对象就行,因为label会触发其对应的input对象,触发形式有两种,你这里用label将input对象包裹起来的写法是隐式触发,另一种显示触发是为label加上for属性,属性值指向input对象的id,无论采取哪种方法,label标签的点击事件都会传递到input对象上,所以这里可以这样获取:

// 点击触发,获取当前点击那个值就行

$('.btn-group.btn-overlap.btn-corner').find(':radio').click(function() {

    console.log($(this).val())    

})

// 直接获取,获取哪个选中

var rdoValue = $('.btn-group.btn-overlap.btn-corner').find(':radio:checked').val()

console.log(rdoValue)


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11896221.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存