.on() target and selector question
Hi:
This is for a modal div with mask.
- <body>
- <div id="content">
- <p>blah</p>
- </div>
- <div id="modal-box">
- <a class="close-btn">there's an image for this, but whatever.</a>
- </div>
- </body>
So the #modal-box is on the page like it's supposed to be according to the on() documentation. The #mask div gets injected; both were set to display: none in the css.
- $('#modal-box').fadeIn(300);
- $('body').append('<div id="mask"></div>');
- $('#mask').fadeIn(300);
So I want to click the .close-btn or the #mask to make #modal-box .fadeOut()
Works vs not working:
- $('#modal-box').on('click', '#modal-box a.close-btn, #mask', function() {
- }); // not working, but of course it wouldn't work on a #mask click
- $('body, #modal-box').on('click', '#modal-box a.close-btn, body #mask', function() {
- }); // works on .close-btn, but not #mask click ?! <== chess notation for WTF?
- $('body, #modal-box').on('click', '#modal-box a.close-btn, #mask', function() {
- }); // works on both.
- $('#modal-box').on('click', 'a.close-btn, #mask', function() {
- }); /* ahh. so. compare right side of .on() to that in line 1. Of course, again, it won't work on #mask since it's not a descendant, here, but we're on to something - just not something good. */
So with line 1, looking at the left hand side of .on(), #modal-box as a selector might actually select something, but attaching a handler for the close button doesn't work. The event is supposed to bubble up from the event target to the bound element. The target is '#modal-box a.close-btn', simple as that. But it acts as if the #modal-box is the target and insists on bubbling up to 'body'. The end of the section on "Event Performance" shows an example of a "hierarchical selector" (but the doc previously said at the end of para 2 of "Event names and namespaces" that css is not hierarchical) but they attach the handler to 'body'. I see no reason it couldn't be attached to the container because the selector is specific to a descendant.
So what am I missing in the ill formed verbiage of the documentation?
Thanks in advance,
Mike
.live() and let .live()