用JavaScript编辑网站

我有一个学校的作业，我很想有一个现场编辑管理面板。我编码这个，但我不能让它正常工作，因为每次我双击一个，然后出它将替换值与以前的值。用JavaScript编辑网站

<script type="text/javascript"> 

    $(function() { 
     var bound = $("p").bind("dblclick", function(event) { 

      event.stopPropagation(); 
      var currentEle = $(this); 
      var value = $(this).html(); 
      edit(currentEle, value); 
     }); 
    }); 

    function edit(currentEle, value) { 
     $(currentEle).html('<input class="tedit" type="text" value="' + value + '" />'); 
     $(".tedit").focus(); 

     $(".tedit").keyup(function(event) { 
      if (event.keyCode == 13) { 
       currentEle.parent('p').html($(this).val().trim()); 
      } 
     }); 

     $(document).click(function() { 
      var value1234 = $(".tedit").val().trim(); 
      $("p").removeClass(); 
      currentEle.html(value1234); 

     }); 
    } 

</script>

这里是的jsfiddle http://jsfiddle.net/x6e16d3n/3/

来源

2014-10-07 Nicklas Pedersen

伙计，我只是在这里问一些帮助，因为我无法找到这个问题我自己，如果你不想帮那就不要。但为什么要花时间来这里开始燃烧呢？ – 2014-10-07 07:47:35

你的问题应该显示你在问题上花费时间，并停留在某种东西上。不是 - “我只是无法得到它的工作”，也上传你的代码到http://jsfiddle.net/。描述什么不工作。所以人们会问最少的问题，只是给你帮助。记住这个网站提出问题/获得对其他人有用的答案。不是你个人问题的解决者。 – 2014-10-07 07:49:05

请创建一个[jsfiddle]（http://jsfiddle.net）来重现您的问题，并附带相关的HTML。 – SeinopSys 2014-10-07 07:49:36

的问题是因为每次你编辑创建连接到具有在创建时的参考电流元素的文档一个新的单击处理程序。

当你编辑另一个对象时，这个处理程序仍然有效，并且仍然有一个对旧元素的引用（查找闭包以理解为什么），但是将值从.tedit在屏幕上添加到p中所以最终他们都会使用相同的文本进行更新。

一个快速soloution将借此单击处理出来的DIT功能的，一旦把它声明，检查编辑是在屏幕上，如果是则进行编辑父HTML等于输入框的值

$(function() { 
    var bound = $("p").bind("dblclick", function (event) { 

     event.stopPropagation(); 
     var currentEle = $(this); 
     var value = $(this).html(); 
     edit(currentEle, value); 

    }); 
}); 

function edit(currentEle, value) { 
    $(currentEle).html('<input class="tedit" type="text" value="' + value + '" />'); 
    $(".tedit").focus(); 

    $(".tedit").keyup(function (event) { 
     if (event.keyCode == 13) { 
      currentEle.parent('p').html($(this).val().trim()); 
     } 
    }); 


} 

$(document).click(function() { 
    if ($(".tedit").length) { 
     var value1234 = $(".tedit").val().trim(); 
     $("p").removeClass(); 
     $(".tedit").parent().html(value1234); 
    } 

});

例如拨弄http://jsfiddle.net/x6e16d3n/11/

来源

2014-10-07 09:10:13 Quince

非常感谢帮助伴侣。欣赏它:) – 2014-10-07 09:38:47

用JavaScript编辑网站

回答

相关问题