变量赋值防止删除项目？

我正在创建可编辑区域，其中普通文本被输入替换，您可以编辑值。编辑完成后，您可以按回车键或点击按钮接受。编辑期间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; 
      } 
     }); 
    } 
}); 

});

一切正常，但是当我尝试这样做，通过点击acccept按钮，它什么也不做，除非我删除变量赋值edited = false;。但它不能这样，因为它阻止了其他字段的编辑。问题是什么？是否因为附有事件的元素（接受按钮）也被删除？有没有人有任何解决方案或明确解释这种行为？提前致谢！

来源

2013-03-02 lukaleli

你能不能用HTML添加完整的代码？ – MIIB 2013-03-02 22:25:56

我已更新我的文章 – lukaleli 2013-03-02 22:34:33

您是否在控制台中发现任何错误？如果您移动edited = false，会发生什么情况;线内的功能的顶部？ – 2013-03-02 22:43:01

由于#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/

来源

2013-03-02 22:52:19

这是正确的答案！完全忘了冒泡。谢谢！ – lukaleli 2013-03-02 23:05:24

变量赋值防止删除项目？

回答

相关问题