Click event is not firing after DOM changes in jQuery

StackOverflow https://stackoverflow.com/questions/7669875

  •  07-02-2021
  •  | 
  •  

Question

I am trying to code ADD & DELETE button in HTML page to delete or add images code in the page. The DELETE button will delete the first image before the button. The ADD button will insert a new image to HTML page and the delete button to the image.

The code works fine: it deletes the image when DELETE button is clicked and it inserts the image when ADD button is clicked. The problem is: the delete button that inserted after ADD button is clicked is not working. So if you click on ADD button and then click on DELETE button the image will not hide; the click event is not firing.

Here is the code:

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>  
    <script type="text/javascript">

        $(document).ready(function(){
            $('.img-post input').after('<button type="button" >Delete</button>');

            $(".img-post button").click(function() {
                    $(this).prev().prev().remove();
                    $(this).prev().remove();
                    $(this).remove();
            });

            $(".add-img button").click(function() {
                    $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
            });

        });


        </script>   
    </head>
    <body>
            <div class="img-post">
                <img  src="image1.jpg" /><input type="hidden" name="allimages[]" value="image1.jpg" /><br />
                <img  src="image2.jpg" /><input type="hidden" name="allimages[]" value="image2.jpg" /><br />
            </div>

            <div class="add-img">
                <button type="button" >Add image</button>
            </div>

    </body>
</html>
Was it helpful?

Solution

Bind the event handler to the button's click event using live() instead of click():

$(".img-post button").live('click', function() {
    $(this).prev().prev().remove();
    $(this).prev().remove();
    $(this).remove();
});

This will ensure that all buttons which match your selector which are added after the initial DOM load will also fire the same function.

http://api.jquery.com/live/

OTHER TIPS

Use live instead:

$(".img-post button").live('click', function() { ...

You have to change your .click(fn) handlers to .live("click", fn). Your .click() handlers only work with elements that are in the page at document.ready time. The elements you add dynamically were not present then so they have no click handlers.

.live(), on the other hand, looks at clicks at the top level and then examines them to see if they are clicked on a matching object and WILL work with objects that are dynamically added to the page after your initialization code runs. .live() only works with some events (events that bubble), but click is one of them that it does work with.

    $(document).ready(function(){
        $('.img-post input').after('<button type="button" >Delete</button>');

        $(".img-post button").live("click", function() {
                $(this).prev().prev().remove();
                $(this).prev().remove();
                $(this).remove();
        });

        $(".add-img button").live("click", function() {
                $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
        });

    });

Try using the jQuery live function. This will bind the click handler to elements that match your selector, even if they don't exist in the DOM when your page initially loads (which is the case in your example).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top