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, Jan 29 '14 at 21:47
possible duplicate of [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/questions/12829963/events-triggered-by-dynamically-generated-element-are-not-captured-by-event-hand) — Felix Kling, Jan 29 '14 at 21:51
and [Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/218196) — Felix Kling, Jan 29 '14 at 21:51

score 3 · Accepted Answer · answered Jan 29 '14 at 21:47

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 '14 at 21:47

Jason P

You'll probably want to remove the click handler from the document after the modal is closed. – codeaddict Jan 29 '14 at 21:50
@natewiley No, bind it once when the page loads, then leave it there. – Jason P Jan 29 '14 at 21:58
i dont like messy html code so i remove things which are only for some reason with no specific content. – user3175393 Jan 29 '14 at 22:01

1 Answers1