jQuery click handlers not triggered inside a modal window

Question

I have a very simple click handler that makes an AJAX GET request on click like so:

$('span.switch-option').click(function() {
    $(this).parents('div.log-in-option').hide();
    $(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});

This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.

Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.

A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.

Answer 1

When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers

Try event propagation

$(document).on('click', 'li.log-in, a.log-in', function() {
        $.get('/login/', function(data) {
            //make a modal window with the html
            $.modal(data);
        });
        return false;
    });