[英]jeditable propagation
我正在使用jeditable,并且我将嵌套元素全部绑定到可裁剪的。 问题是,当我点击嵌套元素时,click事件会在最顶层的父元素上触发。 我怎么能避免这个?
$(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>
谢谢!
这比我原先想象的要棘手......
首先,你可以处理.dblclick
的事件div.wrapper
,这样你就可以停止事件传播。 在每一个双击,你附加jEditable的元素和触发它(注意.click()
调用后.editable()
完成编辑元素后,破坏jEditable元素。
虽然我认为这是它的结束,但是出现了一些棘手的问题。 当完成编辑外div.wrapper
元素,在dblclick
在内部事件div.wrapper
消失了! 因此, 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
函数中执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.