jquery 关于使用 append 追加元素后事件无法触发

最新推荐文章于 2024-07-12 11:14:33 发布

易天海

最新推荐文章于 2024-07-12 11:14:33 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/huawuque004/article/details/93222456

前端专栏收录该内容

116 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

当使用jQuery的append方法动态追加元素时，由于这些元素在文档加载完成后才添加，因此它们的点击事件可能无法生效。解决这个问题可以采用事件委托的方式，将事件绑定到document或者其他已存在的父元素，通过判断目标元素是否匹配，实现对动态添加元素的事件绑定。

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

原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。

解决方案：事件委托方式解决，将指定的事件绑定在document上或者绑定到一开始存在的其它元素身上，只要append元素符合指定的元素，就会绑定此事件。

function loadLevel(Id, i) {
    var ajaxurl = "{:url('wap/apply/ajax_return')}";
    $.get(ajaxurl, { 'pid': Id }, function (data) {
            $.each(JSON.parse(data), function (no, items) {  
                $('.skillLevel ul').append('<li><input type="hidden"  value="'+items.id + '">'+items.cat_name + '</li>');
         });
   });
}
 $(".step-2 li").click(function () {
            var val = $(this).find("input").val()
            $(".step-2").css("display", "none");
            $(".step-2-2").css("display", "block");
            $(".mui-title-content:first-child

了解本专栏