CODEWITHSUNDEEP
javascriptjqueryhtml
Yogi
Yogi

Reputation: 1579

How to inherit event handlers upon removal of elements using class in jquery?

I have the html as follows

    <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>

In the above code, when remover button is clicked I want the parent_div to go empty but I need to retain the event handlers put on them. Because later, I add different html but having the same ids on which I put events before. When I try to do this with the above code, my events are buried regardless of detach() or remove() or emtpy() methods. On the new elements, my click event is not working. Please help me out to solve this

Upvotes: 0

Views: 154

Answers (1)

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

Check this working code.

   

 $().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>

Upvotes: 2

Related Questions