我试图让一些contenteditable
元素正常工作。显然,只需一个简单的HTML5属性就可以轻松实现,但我希望能够使用属性切换元素数量,并切换属性本身。例如,我的起始元素为<article class="column contentEditable">
,然后使用contentEditable
类来切换contenteditable
属性。但是因为我根据用户选择的内容重复了这个元素的次数 - 我需要将.focus()
动作作为一个函数运行,然后在添加更多articles
时调用它。和我一起到目前为止?希望如此。
这是我到目前为止的jQuery(请记住另一个函数将类contentEditable
设置为具有属性contenteditable
)
// content edittable
function makeEditable(action){
$('.contentEditable').focus(function(){
$(this).addClass('active');
$(this).prepend('<div class="toolbar" contenteditable="false">TEST</div>');
});
$('.contentEditable').blur(function(){
$(this).removeClass('active');
$(this).remove('.toolbar');
alert('test');
});
}
在某种程度上,这是完美的,但是因为之前发出此DOM调用时article
可能已经存在,这意味着它运行了两次或更多次(取决于多少次)我已经改变了选择中的选项。我怎么能让这个函数每个项目只运行一次,即不是堆栈。
希望这一切都有道理,很难解释。
答案 0 :(得分:0)
我认为这里发生的是每次用户选择要编辑的元素时调用makeEditable函数(如果我理解你的工作流权)。如果发生了这种情况,你每次都会添加新的焦点和模糊事件,这会导致事件多次触发。
我推荐的是这样的:
function addElement(containerElement) {
// containerElement is a string with the jQuery selector of the parent element
var el = $('<article class="column contentEditable"></article>').appendTo(containerElement);
el.focus(function(){
$(this).addClass('active');
$(this).prepend('<div class="toolbar" contenteditable="false">TEST</div>');
});
el.blur(function(){
$(this).removeClass('active');
$(this).remove('.toolbar');
alert('test');
});
}
function toggleEditable(el) {
// here el is a string with the jQuery selector of the element
$(el).toggleClass('contentEditable');
}
答案 1 :(得分:0)
这是一个简单的例子,它只有一个process
类来运行它一次,每次.focus
运行它都会删除process
类。非常简单,休息后新鲜的眼睛有所帮助。感谢。