Search code examples
jqueryfunctionpopupclone

Cannot close popup after cloning div. Bind()? JQUERY


How can I activate a click event after cloning a div named .popup , then clicking on a span named #close that is designed to close .popup?

Clicking on it currently does nothing. I understand that the div has been created after the page initialises, I just need to know how to bind this to the page so it is recognised when it is clicked upon.

JavaScript:

$('span#close').click(function () {
            $('.popup').fadeOut(1000);
        });

HTML:

<div class="popup">
    <span id="close">Close</span>
    <!-- content -->
</div>

Solution

  • Thank you all for your suggestions, the .on() handler, I could not get this working, no idea why, so I decided to use @faino 's suggestion.

    I created the containing div in the html and set its property to display:none, this div also contained the span#close which is used to close the pop up.

    When an item was cloned, it was appended to that containing div, and when I clicked on the span#close, it removed the cloned item and set the containing divs property back to display:none

    This way, the span#close is not cloned and does not need the event exposed again.

    Again, thanks for all your answers!