用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編輯網站

回答

相關問題