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 回答