如何为JS或jQuery中通过append创建的带ID按钮添加onclick事件？

嘿，我来帮你搞定这个问题！你的代码思路是对的，但可能有两个关键点没注意到：

首先，别忘引入jQuery！ #

你代码里用了$和.on()这些jQuery专属方法，但整个HTML里没加载jQuery库，浏览器根本认不出这些语法，这大概率是代码没生效的核心原因。

要解决这个，先在你的HTML里添加jQuery的引用——可以用本地的jQuery文件，或者公共的CDN资源。比如在<head>里加这么一行：

<script src="jquery.min.js"></script>

然后，关于动态元素的事件绑定 #

虽然你现在的代码在引入jQuery后应该能正常运行（因为.append()是同步操作，执行完后#btn1已经存在于DOM里了），但更健壮、更推荐的方式是用事件委托——把事件绑定到已经存在的父元素上，比如你那个#indiv容器。

这种方式的好处是：不管按钮是现在添加，还是以后通过其他逻辑动态插入，只要它在#indiv里面，点击事件都能触发，完全不用担心元素是否已经存在的问题。

方案1：修正后的原代码（引入jQuery后即可运行） #

<html>
<head>
  <!-- 先引入jQuery -->
  <script src="jquery.min.js"></script>
</head>
<body>
  <div id="indiv"></div>
  <script>
    $('#indiv').append('<button id="btn1">press</button>');
    // 此时按钮已经存在，直接绑定事件
    $('#btn1').on('click', function(){
      alert('Hi!');
    });
  </script>
</body>
</html>

方案2：事件委托（推荐，更灵活） #

<html>
<head>
  <script src="jquery.min.js"></script>
</head>
<body>
  <div id="indiv"></div>
  <script>
    // 先给父容器绑定事件，监听子元素#btn1的点击
    $('#indiv').on('click', '#btn1', function(){
      alert('Hi!');
    });
    // 之后再添加按钮，事件依然能触发
    $('#indiv').append('<button id="btn1">press</button>');
  </script>
</body>
</html>

简单来说：先确保加载了jQuery，然后如果是动态生成的元素，优先用事件委托的方式绑定事件，这样代码更稳、更灵活~

内容的提问来源于stack exchange，提问作者Nik N