Javascript click function not responding

Question

I have simple script which make layer on background when popup div is shown.

jQuery(".openForm").click(function() {    
    jQuery("#popup").show();
    jQuery("body").append('<div id="layer"></div>');
});

This works fine but, when I click somewhere it should close popup with this script

jQuery("#layer").click(function() {    
    jQuery("#popup").hide();
    jQuery("#layer").remove();
});

anyway nothink happens, there is no error even.

What does your HTML look like? Where are you binding the event? Is it after the element exists? Do you have multiple elements with the same ID (you can't do that). — gen_Eric
– gen_Eric, Commented Jan 29, 2014 at 21:47
possible duplicate of Events triggered by dynamically generated element are not captured by event handler — Felix Kling
– Felix Kling, Commented Jan 29, 2014 at 21:51

Jason P · Accepted Answer · 2014-01-29 21:47:17Z

3

I'm guessing #layer doesn't exist when you attempt to bind the handler. Use event delegation instead:

jQuery(document).on('click', "#layer", function() {    
    jQuery("#popup").hide();
    jQuery("#layer").remove();
});

Alternatively, you could hide/show the #layer div (like the #popup div) instead of adding and removing it each time.

answered Jan 29, 2014 at 21:47

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

You'll probably want to remove the click handler from the document after the modal is closed.

@natewiley No, bind it once when the page loads, then leave it there.

i dont like messy html code so i remove things which are only for some reason with no specific content.