Jquery对动态生成的Dom元素设置绑定事件

最新推荐文章于 2021-08-06 00:05:20 发布

原创最新推荐文章于 2021-08-06 00:05:20 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了jQuery中事件绑定的方法，详细对比了live()与on()的区别与用法。live()在1.7版本被废弃，1.9版本被移除，推荐使用on()方法进行事件绑定。通过具体代码示例，解释了如何使用on()方法为动态生成的元素绑定事件。

一、使用`live()`

live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。

<script type="text/javascript">
$(function(){
    $.post("show",function(data){
        var result = "";
        for(var i=0; i<data.length; i++){
             result += "<dl>";
             result += "<dt>"+data[i].name+"</dt>";
             for(var j=0; j<data[i].children.length; j++){
                 result += "<dd>"+data[i].children[j].name+"</dd>";
             }
             result += "</dl>";
        }
        $("#menulist").html(result);
    });
    
    // 动态绑定事件
	$("dt").on("click", function(){
		alert("hello");
	});
});

二、使用`on()`

这里需要注意，这种方法每次执行点击事件的时候，它会先找到你所设置的父级对象例如：body、document。然后去检测有没有子对象。如果有的话，他就将事件给到子对象，子对象得到该事件之后就开始触发事件后面的方法。

<script type="text/javascript">
$(function(){
    $.post("show",function(data){
        var result = "";
        for(var i=0; i<data.length; i++){
             result += "<dl>";
             result += "<dt>"+data[i].name+"</dt>";
             for(var j=0; j<data[i].children.length; j++){
                 result += "<dd>"+data[i].children[j].name+"</dd>";
             }
             result += "</dl>";
        }
        $("#menulist").html(result);
    });
    
    // 动态绑定事件
	$("body").on("click", "dt", function(){
		alert("hello");
	});