Javascript 如何在jquery中使用类删除元素时继承事件处理程序？

我有如下的html

    <div id="parent_div">
        <div class="child_div">
            <p>clicked button 1</p>
            <button id="button1">button1</button>
        </div>

        <div class="child_div">
            <p>clicked button 2</p>
            <button id="button2">button2</button>
        </div>
    </div>

    <button id="remover">remove</button>

    <script type="text/javascript">
        $('#button1').click(function(event) {
            $(this).prev().css('color','red');
        });

        $('#button2').click(function(event) {
            $(this).prev().css('color','yellow');
        });

        var new_html = '<div class="child_div">\
                            <p>new button 1</p>\
                            <button id="button1">button1</button>\
                        </div>\
                        <div class="child_div">\
                            <p>new button 2</p>\
                            <button id="button2">button2</button>\
                        </div>\
                        <div class="child_div">\
                            <p>new button 3</p>\
                            <button id="button3">button3</button>\
                        </div>'

        $('#remover').click(function(event) {
            $('#parent_div').children().detach();
            $('#parent_div').append(new_html);
        });
</script>

单击按钮1

按钮1
点击按钮2

按钮2
去除
$（'#按钮1'）。单击（函数（事件）{
$（this.prev（）.css（'color'，'red'）；
});
$（“#按钮2”）。单击（函数（事件）{
$（this.prev（）.css（'color'，'yellow'）；
});
var new_html=\
新按钮1
\
按钮1\
\
\
新按钮2
\
按钮2\
\
\
新按钮3
\
按钮3\
'
$（“#删除程序”）。单击（函数（事件）{
$（'#parent_div'）.children（）.detach（）；
$（'#parent_div'）。追加（新的html）；
});

---

在上面的代码中，当单击remover按钮时，我希望父分区变为空，但我需要保留放置在它们上的事件处理程序。因为后来，我添加了不同的html，但有相同的ID，我把事件放在上面。当我尝试使用上述代码执行此操作时，我的事件将被掩埋，而不考虑detach（）或remove（）或emtpy（）方法。在新元素上，我的单击事件不起作用。请帮我解决这个问题

检查这个工作代码

$（）.ready（函数（））{
$（'#parent_div'）。在（'单击'，'#按钮1'，函数（事件）{
$（this.prev（）.css（'color'，'red'）；
});
$（'#parent_div'）。在（'click'，'#button2'，函数（事件）{
$（this.prev（）.css（'color'，'yellow'）；
});
$（'#parent_div'）。在（'单击'，'#按钮3'，函数（事件）{
$（this.prev（）.css（'color'，'green'）；
});
var new_html=\
新按钮1
\
按钮1\
\
\
新按钮2
\
按钮2\
\
\
新按钮3
\
按钮3\
'
$（“#删除程序”）。单击（函数（事件）{
$（'#parent_div'）.children（）.detach（）；
$（'#parent_div'）。追加（新的html）；
});
});

单击按钮1

按钮1
点击按钮2

按钮2
删除
检查此工作代码



$（）.ready（函数（））{
$（'#parent_div'）。在（'单击'，'#按钮1'，函数（事件）{
$（this.prev（）.css（'color'，'red'）；
});
$（'#parent_div'）。在（'click'，'#button2'，函数（事件）{
$（this.prev（）.css（'color'，'yellow'）；
});
$（'#parent_div'）。在（'单击'，'#按钮3'，函数（事件）{
$（this.prev（）.css（'color'，'green'）；
});
var new_html=\
新按钮1
\
按钮1\
\
\
新按钮2
\
按钮2\
\
\
新按钮3
\
按钮3\
'
$（“#删除程序”）。单击（函数（事件）{
$（'#parent_div'）.children（）.detach（）；
$（'#parent_div'）。追加（新的html）；
});
});

单击按钮1

按钮1
点击按钮2

按钮2
删除
谢谢，我可以知道出了什么问题吗？为什么它在“on（）”上工作？但不是click（）？它附加了div id“parent_div”上的click事件，并检查单击的元素id是否为“button1”谢谢，我可以知道出了什么问题，为什么它在“on（）”上工作吗？但不是click（）？它在div id“parent\u div”上附加了click事件，并检查单击的元素id是否为“button1”