0

私はいくつかのcontenteditable要素を機能させようとしています。明らかに、これは単純なHTML5属性だけで非常に簡単ですが、属性を持つ要素の量を切り替えたり、属性自体を切り替えたりできるようにしたいと思います。たとえば、私の開始要素はthis<article class="column contentEditable">で、次にofのクラスをcontentEditable使用して属性を切り替えcontenteditableます。ただし、ユーザーが選択した内容に基づいてこの要素を何度も複製しているため、.focus()アクションを関数として実行する必要があります。この関数は、さらにarticles追加されたときに呼び出されます。これまで私と一緒に？そう願っています。

contentEditableこれが私がこれまでに持っているjQueryです（別の関数がクラスに属性を持つように設定することを念頭に置いて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呼び出しが以前に発行されたときにすでに存在している可能性があるため、2回以上実行されていることを意味します（選択のオプションを変更した回数によって異なります。方法地球私は関数をアイテムごとに一度だけ実行するように、つまりスタックではなく実行することができますか？

これがすべて理にかなっていて、説明するのがかなり難しいことを願っています。

4

2 に答える 2

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 に答える
0

クラスを一度だけ実行する単純なケースで、process実行するたび.focusにクラスが削除されprocessます。かなりシンプルで、休憩後の新鮮な目が助けになりました。ありがとう。

于 2012-10-25T13:53:43.690 に答える