jQuery modal close doesn't get trigged

Question

I've the following problem:

I was following this tutorial : http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/

There is a little piece of jquery:

 $('a.close,#mask').on('click', function () {
            $('#mask,.loginPopup').fadeOut(300, function () {
                $('#mask').remove();
            });
            return false;
        });

It takes care of clicking on the #mask (the overlay) or at the close button a.close

Live is deprecated now so i tried to simply replace it with on:

$('a.close, #mask').on('click', function () {
    $('#mask , .loginPopup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

The a.close works perfectly but #mask doesn't work anymore like the demo does

It doesn't trigger the function anymore if i click outside the jQuery modal.

CSS:

#mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: 999;
}

HTML

 <div id="loginBox" class="loginPopup">
        <a href="#" class="close">
            <img src="@Url.Content("../Content/images/close_pop.png")" class="btn_close" title="Close Window" alt="Close" /></a>


        <form method="post" class="signin" action="#">
            <fieldset class="textbox">
                <legend>Login box</legend>

                <label class="username">
                    <span>Username or email</span>
                    <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Email">
                </label>

                <label class="password">
                    <span>Password</span>
                    <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>

                <button class="submit button" type="button">Sign in</button>
            </fieldset>
        </form>



    </div>

If you are dynamically creating `#mask` which I would assume you are based on the `$('#mask').remove()` call, you need to bind `.on()` to something that already exists when `#mask` is created. — ayyp, Jun 25 '13 at 20:45

score 3 · Accepted Answer · answered Jun 25 '13 at 20:45

3

Try this version:

$(document).on('click', 'a.close, #mask', function () {
    $('#mask , .loginPopup').fadeOut(300, function () {
        $('#mask').remove();
    });
    return false;
});

From the jQuery documentation on replacing live():

$(selector).live(events, data, handler);

becomes

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

answered Jun 25 '13 at 20:45

GriffeyDog

8,186
3
22
34

Thank you very much. It fixed my problem. I see i've to learn much about binding. Thank you for the extra explanation! – JochemQuery Jun 25 '13 at 20:47
1

@JochemTheSchoolKid You cannot bind to what does not exist. This works around that problem by delegating the handler to `document` instead. Read [this answer](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on#8111171) for more info. – mekwall Jun 25 '13 at 20:50

jQuery modal close doesn't get trigged

1 Answers1