Question

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

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

Answer 1

我认为这里发生的是每次用户选择要编辑的元素时调用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');
}

Answer 2

这是一个简单的例子，它只有一个process类来运行它一次，每次.focus运行它都会删除process类。非常简单，休息后新鲜的眼睛有所帮助。感谢。

强制函数覆盖其他操作

2 个答案: