第三次嘗試動態div容器文本區域失去其價值

我使用「添加到列表...」按鈕動態創建div。動態div分爲標題和內容兩部分。 div的兩部分都有onclick事件，在textarea的點擊部分顯示文字。有一個textarea模糊事件，使div恢復到原來的形式。第三次嘗試動態div容器文本區域失去其價值

問題出現在我第三次點擊任何div部分時。它textarea盒損失它的價值，並開始顯示「」

任何有關這個問題的幫助將不勝感激。爲了清楚理解，我將分享下面的完整代碼。

感謝提前:)

<html> 
<head> 
    <title>Javascript Create Div Element Dynamically</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 
    <style type="text/css"> 
     body { 
      min-width: 520px; 
     } 

     .column { 
      width: 170px; 
      float: left; 
      padding-bottom: 100px; 
     } 

     .portlet { 
      margin: 0 1em 1em 0; 
      padding: 0.3em; 
     } 

     .portlet-header { 
      padding: 0.2em 0.3em; 
      margin-bottom: 0.5em; 
      position: relative; 
     } 

     .portlet-toggle { 
      position: absolute; 
      top: 50%; 
      right: 0; 
      margin-top: -8px; 
     } 

     .portlet-content { 
      padding: 0.4em; 
     } 

     .portlet-placeholder { 
      border: 1px dotted black; 
      margin: 0 1em 1em 0; 
      height: 50px; 
     } 

     div { 
      min-height:20px; 
     } 

     textarea { 
      width: 100%; 
      resize:vertical; 
     } 
    </style> 
    <script type="text/javascript" language="javascript"> 
     $(function() { 
      $(".column").sortable({ 
       connectWith: ".column", 
       handle: ".portlet-header", 
       cancel: ".portlet-toggle", 
       placeholder: "portlet-placeholder ui-corner-all" 
      }); 

      $(".portlet") 
       .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
       .find(".portlet-header") 
       .addClass("ui-widget-header ui-corner-all") 
       .prepend("<span class='ui-icon portlet-toggle ui-icon-minusthick'></span>"); 

      $(".portlet-toggle").click(function() { 
       var icon = $(this); 
       icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
       icon.closest(".portlet").find(".portlet-content").toggle(); 
      }); 
     }); 

     function createDiv() { 
      //alert("Test!!"); 
      var divTag = document.createElement("div"); 

      divTag.className = "column"; 
      divTag.innerHTML = "<div class='portlet'>" + 
           "<div class='portlet-header'><span class='rubrik' onclick='divClicked(this)'>Feeds</span></div>" + 
           "<div class='portlet-content' onclick='divClicked(this)'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>" + 
           "</div>"; 

      document.body.appendChild(divTag); 

      $(".column").sortable({ 
       connectWith: ".column", 
       handle: ".portlet-header", 
       cancel: ".portlet-toggle", 
       placeholder: "portlet-placeholder ui-corner-all" 
      }); 

      $(".portlet") 
       .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
       .find(".portlet-header") 
       .addClass("ui-widget-header ui-corner-all") 
       .prepend("<span class='ui-icon portlet-toggle ui-icon-minusthick'></span>"); 

      $(".portlet-toggle").click(function() { 
       var icon = $(this); 
       icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); 
       icon.closest(".portlet").find(".portlet-content").toggle(); 
      }); 
     } 

    function divClicked(placeholder) { 
     var divHtml = $(placeholder).html(); 
     var editableText = $("<textarea>"); 
     $(placeholder).html(editableText.val(divHtml)); 
     $(placeholder).removeAttr("onclick"); 
     editableText.focus(); 
     editableText.blur(function() { 
      editableTextBlurred(placeholder, editableText); 
     }); 
    } 

    function editableTextBlurred(placeholder, editableText) { 
     var html = $(editableText).val(); 
     $(placeholder).on('click', function() { 
      divClicked(placeholder); 
     }); 
     var viewableText = html; 
     $(editableText).replaceWith(viewableText); 
    } 
    </script> 
</head> 
<body> 
     <input id="button" 
       type="button" 
       value="Add to list..." onclick="createDiv();" /> 

</body> 
</html>

來源

2014-02-11 Shahab Q

我幾乎不想解碼你的整個腳本，但我會走出一條腿，並說它最有可能是你的邏輯。 – VIDesignz

如果你會愚蠢的腳本並進入www.jsfiddle.net我相信你會得到一個回答 – VIDesignz

在你的函數editableTextBlurred更換

$(placeholder).on('click', function() { 
     divClicked(placeholder); 
    });

與

$(placeholder).attr("onclick","divClicked(this)");

應該工作。 :)

來源

2014-02-11 21:23:53 Sunny

魔獸。它完美的作品。非常感謝你的幫助@Sunny –

第三次嘗試動態div容器文本區域失去其價值

回答

相關問題