javascript - 变量赋值会阻止删除项目吗？

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;
            }
        });
    }
});

});

当你按回车键时一切正常，但是当我尝试通过单击“接受”按钮来做到这一点时，它什么也不做，除非我删除变量赋值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/