1

通常のテキストが入力に置き換えられ、値を編集できる編集可能領域を作成しています。編集後、Enterキーを押すか、ボタンをクリックして受け入れます。編集中editedは、他のフィールドが編集できないように変数をtrueに設定します。これがHTMLです

        <section class="person-info">
            <div class="row">
                <span id="name" class="editable">Martin Chikilian</span>
                <span id="living-place" class="editable">Portland, Oregon, USA</span>
                <span id="langs" class="editable">English, French, German</span>
            </div>
        </section>

およびjavascriptコード：

$(function(){

var edited = false;

$('.editable').click(function(){
    if(!edited){
        edited = true;
        var _this = $(this);
        var confirmIcon = (_this.attr('id') == 'name') ? 'big-confirm' : 'confirm';
        var text = $(this).text();

        //this will be injected into editable element to replace existing text
        var input = $('<input type="text" value="' + text +'" /><span id="accept" class="icon ' + confirmIcon + '"></span>');

        _this.html('');
        _this.append(input);
        input.focus();
        var accept = _this.find('#accept');

        //binding click event to confirmation button
        accept.click(function(){
                var inputVal = input.val();
                _this.html(inputVal);
                //edited = false;
        });

        //binding event to enter press
        input.keypress(function(e){
            if(e.which == 13){
                var inputVal = input.val();
                _this.html(inputVal);
                edited = false;
            }
        });
    }
});

});

Enterキーを押すとすべてが機能しますが、[承認]ボタンをクリックしてこれを実行しようとすると、変数の割り当てを削除しない限り、何も実行されませんedited = false;。ただし、他のフィールドを編集できないため、そのままにしておくことはできません。何が問題ですか？イベントが付加された要素（承認ボタン）も削除されたためですか？誰かがその行動の解決策や明確な説明を持っていますか？前もって感謝します！

4

1 に答える 1

1

はの子#acceptであるため.editable、clickリッスンしているイベントがDOMをバブルアップし、クリックハンドラー.editableもオフになり、が発生しedited === trueます。

これを回避するには、次を使用してイベントの伝播を停止しevent.stopPropagation()ます。

accept.click(function(e){
    var inputVal = input.val();

    _this.html(inputVal);
    edited = false;
    e.stopPropagation();
});

例： http： //jsfiddle.net/6zAN7/13/

于 2013-03-02T22:52:19.390 に答える