Javascript 如何借助此事件处理程序创建的元素在事件处理程序外部动态附加元素？

我制定了以下代码来澄清这个问题：

Html:

这是一个静态div
单击我添加一个新按钮

Js:

$（函数（）{
$（'.add dynamic button'）。打开（“单击”，函数（）{
$（'body'）.append（“单击我添加动态div'”）；
});
$（'.dynamic button'）。在（'单击'，函数（）上）{
$（'body'）.append（“这是一个动态div”）；
});
});

下面是要测试的JSFIDLE：

当我在第一个click处理程序中有（'click'）处理程序上的$（'dynamic button'）。时，可以添加一个.dynamic div。 但是，当我将它放在第一次单击处理程序范围之外时（如上面的示例所示），什么也没有发生。我最初认为$.on适用于任何尚未创建的DOM元素，但现在发现它适用于相同类或类型的新元素，如果它们已经在DOM中，或者$.on放置在创建这些元素的函数中。 您能否澄清为什么会发生这种情况，以及是否有任何方法允许在创建事件处理程序的处理程序之外的动态创建的元素上使用事件处理程序？ 谢谢

$（）

是一个选择器。它查找文档中的元素或在执行此操作时从中生成整个查询的父元素

如果要将更多按钮绑定到

单击
事件，则需要手动绑定它们：

 $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>")
         .on("click", ....);

$（'body'）.append（“单击我添加动态div”）
。打开（“单击”按钮，…）；

$(function(){
$('.add-dynamic-button').on("click",function(){
    $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>");
});
    $('.dynamic-button').on('click',function(){
        $('body').append("<div class='dynamic-div'>This is a dynamic div</div>");
});
});

 $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>")
         .on("click", ....);