0

我试图让一些contenteditable元素工作。显然，仅使用一个简单的 HTML5 属性就非常容易，但我希望能够使用该属性切换元素的数量并切换属性本身。例如，我的起始元素是 this <article class="column contentEditable">，然后使用 class ofcontentEditable来切换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');
});
}

在某种程度上，这完美地工作，但是因为article之前发出此 DOM 调用时可能已经存在，这意味着它运行了两次或更多次（取决于我在选择中更改选项的次数。如何地球我可以让每个项目只运行一次的功能，即不堆栈。

希望这一切都有意义，很难解释。

4

2 回答 2

0

这是一个简单的例子，process在它上面有一个类只运行一次，每次.focus运行它都会删除process该类。真的很简单，休息后新鲜的眼睛会有所帮助。谢谢。

于 2012-10-25T13:53:43.690 回答
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');
}
于 2012-10-25T12:32:17.037 回答