使用ajax附加html后，jQuery方法不适用于按钮

Question

我加载带有一些html和javascript的html页面，代码如下

<button id="test"> test button </button>
<div id="result"></div>

我有如下脚本（正确添加了jQuery）

<script>
$("#test").on("click" , function(){
    $("#result").text("hello world");
});
$("#button1").on("click" , function(){
        $("#result").text("goodbye world");
    });
</script>

测试按钮可以正常工作。 现在让我们说，不是打印出hello world，而是在结果div上添加了已设置了方法的添加按钮。

<button id="test"> test button </button>
    <div id="result"><button id="button1">Button 1</button></div>

单击button1没反应吗？ 为什么会这样呢？ 我认为由于它是动态创建的，因此不会注册html。 单击该按钮后，如何使它发生某些事情？ 谢谢高级

Answer 1

此按钮动态地出现在页面上，因此您需要这样编写它的事件：

$('#result').on("click","#button1" , function(){
            $("#result").text("goodbye world");
        });

要么：

$(document).on("click","#button1" , function(){
        $("#result").text("goodbye world");
    });

在这里阅读更多

Answer 2

使用此代码

 $(document).ready(function () {
        $("#test").click(function () {
            $("#result").text("Hello");
        });
        $("#button1").click(function () {
            alert('');
            $("#result").text("hello world");
        });
    });