Jquery click event not firing on previously hidden div

Question

I am loading a \'password-reset-success-message\' div into a \'password-reset\' div dynamically as shown in the below snippet.The \'password-reset-success-message\' div

Answer 1

delegate it to the parent element you are adding the html to

if using jQuery 1.7+ with .on()

$("#password-reset").on('click','#btnPasswordResetOK',function(){

})

with delegate

$("#password-reset").delegate('#btnPasswordResetOK','click',function(){

})

From jQuery docs on which method to use

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

By delegating, you bind the event handler to a static parent element that doesn't change and exists at the time of binding. You specify the element and the events you want to listen to, and when the event bubbles up it will get handled by the static parent element.

Answer 2

Try using 'live'

$(document).on(events, selector, data, handler);  

Answer 3

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Your content is not there on the page when ready event is triggered. You generate the elements and content dynamically so you must use live/on event handler.