jQuery使用on()方法给动态生成元素绑定事件

最新推荐文章于 2023-08-01 14:27:18 发布

转载最新推荐文章于 2023-08-01 14:27:18 发布 · 9.6k 阅读

本文介绍如何使用jQuery的on()方法正确地为动态添加的元素绑定事件监听器，特别是针对表格中复选框的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery on()方法是jquery1.7+后才使用的

由于需求：动态添加了以下代码

<tr
class="pj" data-val="no">
<th
id="first_tr" rowspan="1" colspan="1" data-id="xxx">自我评价<button
type="button" title="添加" id="add_rw"/> 
</th>
<td
colspan="2">
<input
type="text" name="task_name" datatype="title" Caption="自我评价" MAXLEN="100" ISNULL="notnull"/></td>
<td
colspan="1"><input
type="checkbox" name="result" value="2"/></td>
<td
colspan="1"><input
type="checkbox" name="result" value="1"/></td>
<td
colspan="1"><input
type="checkbox" name="result" value="0"/></td>
</tr>

　　绑定是这么写的

       $("input[name='result']").on("click",function(){
            var len =     $(this).parent().siblings().children("input").attr("checked",false);
            $(this).attr("checked",true);
        
    });

发现对于动态添加的没有起到监听作用，那么对代码进行修改，把监听对象改成静态的就可以了

       $("table").on("click","input[name='result']",function(){
            var len = $(this).parent().siblings().children("input").attr("checked",false);
            $(this).attr("checked",true);
        
    });

这里table是非动态添加的父节点，由于.pj也是动态生成的，写.pj 作为父节点是没有效果的。