jquery动态添加元素无法触发绑定的事件的解决方案。

最新推荐文章于 2024-04-15 00:31:31 发布

最新推荐文章于 2024-04-15 00:31:31 发布 · 4.3k 阅读

文章标签：

#jquery

错误专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用jQuery处理动态添加元素后的事件绑定问题。通过两种方法解决了动态元素无法触发事件的问题：一是使用live事件（仅限1.9及以下版本）；二是采用on()方法进行事件委托。

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

　　最近遇到一个问题，即当用jquery动态添加元素后，发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料，发现原来要这样处理：

　　先上我出错的代码:
　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
　　　　　　　　//这里是动态添加元素
            $(".add").click(function(){
                var btn = $("<button class='newBtn btn btn-default'>新按钮</button>");
                $("body").append(btn);
            })<br><br>　　　　　　　　//这里是为添加的元素添加事件
            $(".newBtn").click(function(){
                alert("这里是新添加的元素触发的事件");
            })

        })
    </script>
</head>
<body>
<button class=" add btn btn-default">添加按钮</button>
</body>
</html>

　　奉上我的解决方法
　　方法一：绑定live事件(live事件只在jquery1.9以下才支持，高版本不支持)。
　　

$(".newBtn").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以
   alert('这里是动态元素添加的事件');
 })

　　方法二：利用on（）事件绑定
　　($(ParentEle).on("click",".thisEle",function(){})
　　

$("body").on("click", ".newBtn", function() {
              alert('这里是动态元素添加的事件');
          });//这里的ParentEle是 thisEle的父辈元素或者祖先元素，ParentEle可以是document，也可以是body等。<br><br><br>//注意：如果此时调用的函数是外部定义好的函数，那在调用的时候不要加（），不然会跳过点击事件直接触发函数

$("body").on("click", ".newBtn",aa );
　function aa(){
        alert('这里是动态元素添加的事件');
  }

　　ok，问题解决，继续爬坑。