强制函数覆盖其他操作

时间:2012-10-25 12:15:05

标签: javascript jquery html5 contenteditable

我试图让一些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可能已经存在,这意味着它运行了两次或更多次(取决于多少次)我已经改变了选择中的选项。我怎么能让这个函数每个项目只运行一次,即不是堆栈。

希望这一切都有道理,很难解释。

2 个答案:

答案 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类。非常简单,休息后新鲜的眼睛有所帮助。感谢。