如何让jQuery函数c3持续监听指定ID元素的点击事件？

现有测试HTML代码：

<button class="button is-small is-danger is-light" id="choose">choose</button>

对应的jQuery代码：

function c3 () { $("#choose").click(function() { alert("clicked")})}

执行c3函数后，点击按钮会弹出"clicked"提示，但如果该按钮是动态生成或重新渲染的，原绑定会失效，需要让c3函数能持续监听该ID元素的点击事件，该如何实现？

要实现持续监听（包括处理动态生成的目标元素），你需要用事件委托的方式来绑定事件，具体修改如下：

function c3() {
  // 绑定到document，监听#choose元素的点击
  $(document).on('click', '#choose', function() {
    alert("clicked");
  });
}

为啥这样管用？ #

• 原来的click()方法是直接把事件绑定在按钮本身上，只有调用c3()时按钮已经存在于页面DOM中，绑定才有效；如果之后按钮被移除再重新添加，之前的绑定就丢了。
• on()的事件委托模式，是把监听逻辑绑在一个始终存在的父容器（比如整个文档document，或者按钮的直接父元素）上。当点击按钮时，事件会向上冒泡到这个父容器，jQuery会检查触发事件的元素是不是#choose，如果是就执行弹出提示的代码。这样不管按钮是一开始就在页面，还是后续动态生成的，都能触发事件。

小建议：尽量选离按钮最近的固定父元素来绑定，别直接用document，这样能减少事件冒泡的开销，性能更好。比如按钮如果在div#btn-container里，就可以写成：

function c3() {
  $('#btn-container').on('click', '#choose', function() {
    alert("clicked");
  });
}

内容的提问来源于stack exchange，提问作者Jonas Fredriksson