StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POX-Editable: stop propagation on "click to edit"
text
Body
copied!<p>I have an editable element inside a div which itself is clickable. Whenever I click the x-editable anchor element, the click bubbles up the DOM and triggers a click on the parent div. How can I prevent that? I know it's possible to stop this with jQuery's <code>stopPropagation()</code> but where would I call this method?</p> <p>Here's the JSFiddle with the problem: <a href="http://jsfiddle.net/4RZvV/" rel="nofollow">http://jsfiddle.net/4RZvV/</a> . To replicate click on the editable values and you'll see that the containing div will catch a click event. This also happens when I click anywhere on the x-editable popup and I'd like to prevent that as well.</p> <p><strong>EDIT after lightswitch05 answer</strong></p> <p>I have multiple dynamic DIVs which should be selectable so I couldn't use a global variable. I added an attribute to the <code>.editable-click</code> anchors which get's changed instead.</p> <p><code>editable-active</code> is used to know if the popup is open or not</p> <p><code>editable-activateable</code> is used instead to know if that <code>.editable-click</code> anchor should be treated like it is</p> <pre><code>$(document).on('shown', "a.editable-click[editable-activateable]", function(e, reason) { return $(this).attr("editable-active", true); }); $(document).on('hidden', "a.editable-click[editable-activateable]", function(e, reason) { return $(this).removeAttr("editable-active"); }); </code></pre> <p>The check is pretty much like you've described it</p> <pre><code>$(document).on("click", ".version", function() { $this = $(this) // Check that the xeditable popup is not open if($this.find("a[editable-active]").length === 0) { // means that editable popup is not open so we can do the stuff // ... do stuff ... } }) </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