Javascript 向动态添加的HTML元素添加事件侦听器

我有HTML

<input type="button" class="btnx" value="click me">

和附加的JS文件

$(".btnx").on("click",function(){
    var newbtn = "<input type='button' class='btnx' value='click me'>";
  $('body').append(newbtn);
});

$（“.btnx”）。在（“单击”，函数（）{
var newbtn=“”；
$（'body'）。追加（newbtn）；
});

当我点击按钮1时，新按钮会附加到主体上，但当我点击新按钮（按钮2或按钮3）时，为什么不再形成按钮

我在谷歌上搜索并找到了使用“.on（）”的方法，但仍然不明白为什么它不起作用

JSIDLE链接： 您可以使用

$（'body'）。在（'click'、'.btnx'、…）

上：

$（“body”）。在（“click”、'.btnx'，function（）上{
var newbtn=“”；
$（'body'）。追加（$（newbtn））；
});

是的，它正在工作，但我的代码有什么问题？我不明白。在答案中添加了解释，如果足够清楚，请告诉我：）谢谢，现在我明白了