StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The short answer is simply, <em>you can't</em>. </p> <h3>The problem</h3> <p>Normally, you can stop an event from "bubbling up" to event handlers on outer elements because the handlers for inner elements are called <em>first</em>. However, jQuery's "live events" work by attaching a proxy handler for the desired event to the document element, and then calling the appropriate user-defined handler(s) <em>after the event bubbles up the document</em>. </p> <p><a href="http://shog9.com/so_1967537_bubbling.png">Bubbling illustration http://shog9.com/so_1967537_bubbling.png</a></p> <p>This generally makes "live" binding a rather efficient means of binding events, but it has two big side-effects: first, any event handler attached to an inner element can prevent "live" events from firing for itself or any of its children; second, <strong>a "live" event handler cannot prevent any event handlers attached directly to children of the document from firing</strong>. You can stop further processing, but you can't do anything about processing that has already occurred... And by the time your live event fires, the handler attached directly to the child <em>has already been called</em>.</p> <h3>Solution</h3> <p>Your best option here (so far as I can tell from what you've posted) is to use live binding for both click handlers. Once that's done, you should be able to <code>return false</code> from the <em>.MoreAppointments</em> handler to prevent the <em>.DateBox</em> handler from being called. </p> <h3>Example:</h3> <pre><code>$('.MoreAppointments').live('click', function(e) { alert("Hi"); return false; // prevent additional live handlers from firing }); // use live binding to allow the above handler to preempt $('#CalendarBody .DateBox').live('click', function(e) { AddApointment(this); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload