jeditable propagation
i'm using jeditable and I have nested elements all binded to jeditable. Problem is when I click on a nested element the click event gets triggered on the top most parent. How can I avoid this ?
$(document).ready(function() {
console.log('loading');
$('div.wrapper').editable('edit/', {
loadurl : 'edit/',
//id : 'section',
name : 'content',
submitdata : function(value, settings) {
var section = $(this).parent('section').attr("data-section");
return {
section: section,
type: 'ajax',
}
},
loaddata : function(value, settings) {
var section = $(this).parent('section').attr("data-section");
return {
section: section,
type: 'ajax',
}
},
rows : 6,
width : '100%',
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : 'Saving changes',
tooltip : "Doubleclick to edit...",
onblur : 'ignore',
event : "dblclick",
style : 'inherit',
callback : function(value, settings) {
// console.log(开发者_运维技巧this);
console.log(value);
console.log(settings);
$('section[class^="annotation"]').each(function(index) {
$(this).attr('data-section', index + 1);
});
}
});
});
[edit]
Here is the HTML code:
<article>
<section class="annotation1" data-section="1" id="section_data-section1" typeof="aa:section">
<div class="wrapper" title="Doubleclick to edit...">
<h1>Section </h1>
<p>some content</p>
<section class="annotation2" data-section="2" id="subsection_data-section2" typeof="aa:section">
<div class="wrapper" title="Doubleclick to edit...">
<h2>Subsection </h2>
<p>some more content</p>
</div>
</section>
</div>
</section>
</article>
Thanks!
This is trickier than I originally thought...
Firstly, you could handle the .dblclick
event for the div.wrapper
, so you can stop event propagation. At each double-click, you attach the jEditable to the element and trigger it (note the .click()
after calling .editable()
. After finish editing the element, destroy the jEditable element.
While I was thinking it was the end of it, something trickier came up. When finishing editing the outer div.wrapper
element, the dblclick
event in the inner div.wrapper
disappeared! So, the div.wrapper
element has to be cloned before it becomes an editable element. And just after the jEditable restores the wrapper element, it is replaced with the previously stored clone.
$('div.wrapper').dblclick(function(event) {
event.stopPropagation();
// save a clone of "this", including all events and data
$(this).data('clone', $(this).clone(true, true))
.editable('edit/', {
onreset: function() {
var $that = this.parent();
$that.editable('destroy');
// restore the editable element with the clone
// to retain the events and data
setTimeout(function() {
$that.replaceWith($that.data('clone'));
}, 50);
}
}).click();
});
See it in action: http://jsfiddle.net/william/vmdz6/3/.
You may need to manually update the cloned element after it is updated with the edited data. You should be able to do that in the callback
function.
精彩评论