.on() target and selector question

.on() target and selector question

Hi:

This is for a modal div with mask.

  1. <body>
  2. <div id="content">
  3.       <p>blah</p>
  4. </div>
  5. <div id="modal-box">
  6.       <a class="close-btn">there's an image for this, but whatever.</a>
  7. </div>
  8. </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.

  1. $('#modal-box').fadeIn(300);
  2. $('body').append('<div id="mask"></div>');
  3. $('#mask').fadeIn(300);
So I want to click the .close-btn or the #mask to make #modal-box .fadeOut()

Works vs not working:

  1. $('#modal-box').on('click', '#modal-box a.close-btn, #mask', function() {
  2. }); // not working, but of course it wouldn't work on a #mask click

  3. $('body, #modal-box').on('click', '#modal-box a.close-btn, body #mask', function() {
  4. }); // works on .close-btn, but not #mask click ?! <== chess notation for WTF?

  5. $('body, #modal-box').on('click', '#modal-box a.close-btn, #mask', function() {
  6. }); // works on both.

  7. $('#modal-box').on('click', 'a.close-btn, #mask', function() {
  8. }); /* 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()