Question

我正在创建可编辑区域，其中普通文本被输入替换，您可以编辑值。编辑完成后，您可以按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键时，一切都有效，但是当我尝试通过单击“acccept”按钮来执行此操作时，除非我删除变量赋值edited = false;，否则它什么也不做。但它不能保持这样，因为它可以防止其他字段可编辑。问题是什么？是因为附加了事件的元素（接受按钮）也被删除了吗？有没有人对这种行为有任何解决方案或明确的解释？提前谢谢！

Answer 1

由于#accept是.editable的孩子，您正在收听的click事件bubbles up the 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/

变量赋值可以防止删除项目？

1 个答案: