[英]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.