jeditable propagation
jeditable propagation
本文关键字:propagation jeditable 更新时间:2023-09-26
我正在使用jeditable,我有嵌套的元素都绑定到jeditable。问题是,当我点击一个嵌套元素时,点击事件会在最上面的父元素上触发。如何避免这种情况?
$(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);
});
}
});
});
[编辑]下面是HTML代码:
<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>
谢谢!
这比我原来想象的要棘手…
首先,您可以为div.wrapper
处理.dblclick
事件,这样您就可以停止事件传播。在每次双击时,将jEditable附加到元素并触发它(注意在调用.editable()
之后的.click()
)。编辑完元素后,销毁jEditable元素。
当我认为这是结束的时候,更棘手的事情发生了。当完成外部div.wrapper
元素的编辑时,内部div.wrapper
中的dblclick
事件消失了!因此,div.wrapper
元素必须在成为可编辑元素之前进行克隆。在jEditable恢复包装器元素之后,它将被替换为先前存储的克隆。
$('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();
});
实际操作:http://jsfiddle.net/william/vmdz6/3/.
您可能需要在使用编辑过的数据更新克隆元素之后手动更新它。您应该能够在callback
函数中做到这一点。