[jQuery] jeditable and event bubbling
I'm sure there's an easy solution to this, but I've spent most of the
evening experimenting with it and an obvious means of preventing the
default behavior escapes me. Here's the scenario:
I have a span embedded in an anchor tag. The content in the span is
editable via jeditable. Editing is triggered by an external element
(another span). There are several such items in the page in an
unordered list. So, something like this in the markup:
<ul>
<li><a href="somelink1"><span class="editme">Link 1</span></a><span
class="editTrigger">rename the link</span></li>
<li><a href="somelink2"><span class="editme">Link 2</span></a><span
class="editTrigger">rename the link</span></li>
</ul>
Jquery/javascript is standard for jeditable. What happens when the
editable is triggered (via a .trigger("click") call in the click
binding for the editTrigger elements), however, is the event
ultimately bubbles to the anchor tag, causing the url specified in the
anchor tag href attribute to load. I've tried various means of
intercepting the event and stopping event propogation / bubbling.
Nothing seems to work so far. Might anyone have an approach to editing
link text w/ jeditable that won't result in loading of the link
itself?
Of note, wrapping the anchor tag in the span will work as expected,
but the entire html content of the span is loaded in the jeditable
form, and that markup is ultimately replaced by the response from the
server (essentially blowing away the link).
Thanks in advance for any input!