如何选中通过jQuery insertAfter()动态添加的指定id元素？

问题核心：你提前写的$("#new-button").click()绑定代码，在页面加载时就执行了，但此时#new-button还没被创建出来，jQuery找不到这个元素，所以事件绑定失败。

解决方法一：创建元素时直接绑定事件 #

在动态生成按钮的同时，直接为它绑定点击事件，元素创建完成后事件立即生效：

$("button").click(function(){
  $("<button id='new-button'>Added Button</button>")
    .insertAfter("#this")
    .click(function(){
      $("<span> #new-button-work</span>").insertAfter("#this");
    });
});

解决方法二：使用事件委托 #

把事件绑定到页面加载时就存在的父元素（比如body，或者更靠近目标元素的容器）上，通过事件冒泡机制监听动态元素的点击：

$("button").click(function(){
  $("<button id='new-button'>Added Button</button>").insertAfter("#this");
});

// 事件委托：监听body内#new-button的点击事件
$("body").on("click", "#new-button", function(){
  $("<span> #new-button-work</span>").insertAfter("#this");
});

这种方式的优势在于，不管元素是页面初始化就存在，还是后续动态添加的，只要匹配选择器，事件就能正常触发。

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