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

Question

我有如下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>

在上面的代码中，当单击卸妆按钮时，我希望parent_div为空，但我需要保留放在它们上的事件处理程序。因为后来，我添加了不同的 html，但具有与之前放置事件的相同 ID。当我尝试使用上面的代码执行此操作时，无论 detach(( 或 remove(( 或 emtpy(( 方法如何，我的事件都被埋没了。在新元素上，我的单击事件不起作用。请帮我解决这个问题

Answer 1

检查此工作代码。

   
 $().ready(function(){
       $('#parent_div').on('click', '#button1', function (event) {
            $(this).prev().css('color', 'red');
        });
        $('#parent_div').on('click', '#button2', function (event) {
            $(this).prev().css('color', 'yellow');
        });
        $('#parent_div').on('click', '#button3', function (event) {
            $(this).prev().css('color', 'green');
        });
        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 src="https://code.jquery.com/jquery-1.12.4.js"></script>
<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>