jquery添加多個div容器

Question

我有一個表單將內容發佈到牆上。我們可以在那裏發佈圖片和文字。我將表單內容顯示在contenteditable div中，所以郵箱顯示人們想要上傳的圖像，並且他們也可以輸入div。我注意到，雖然人們上傳圖像。它會像預期的那樣被添加到div中，當它們開始輸入時，它也會在文本週圍添加照片容器。我怎樣才能阻止這種情況發生？

這裏是我的表單代碼

<form id="post-form" action="Scripts/create-post.php" method="post" onsubmit="return setEditable();"> 
    <input type="hidden" id="posted" name="posted" value=""/> 
    <div id="post-message" name="post-message" contentEditable="true"></div> 
    <input id="upload-pic" name="upload-pic" type="file"/> 
    <button class="post-buttons" onclick="chooseFile(); return false;">Add Photo</button> 
    <button class="post-buttons">Add Link</button> 
    <input type="submit" value="Post" /> 
    <div class="cleared"></div> 
</form> 

這裏是增加了上傳照片到CONTENTEDITABLE DIV

function chooseFile() { 
    $("#upload-pic").click(); 
} 

$(document).on('change', "#upload-pic", function(){ 
    readURL(this); 
}); 

function readURL(input){ 
    if(input.files && input.files[0]){ 
     var reader = new FileReader(); 
     reader.onload = function(e){ 
     $('#post-message').prepend("<div id='post-image-container'><img id='preview'/></div>"); 
      $('#preview').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

，你可以看到，當文件被上傳它觸發點擊了jQuery將圖像添加到div中，並將img包圍在div id後置圖像容器中。這是img添加到div後添加到文本的內容。

我知道這是因爲警報的它顯示我作爲

<div id="post-image-container"><img src='whatever the path is'></div><div id="post-image-container">hello world(if this is what the user typed in)</div> 

所以我設法找到了，如果文本是在CONTENTEDITABLE DIV已經或之前的div的價值，它不添加文本週圍額外的div標籤。只有在圖像被插入後，你再次敲入回車鍵，我認爲它會確認輸入命中的圖像發生了變化，然後是連續的鍵擊。

Answer 1

檢查#post-image-container是否已經存在，只需更新它。如果它沒有，則將其前置。

function readURL(input){ 
     if(input.files && input.files[0]){ 
      var reader = new FileReader(); 
      reader.onload = function(e){ 


       if($('#post-image-container').length){ 

        $('#preview').attr('src', e.target.result); 

       }else{ 

        $('#post-message').prepend("<div id='post-image-container'><img id='preview'/></div>"); 
         $('#preview').attr('src', e.target.result); 
        } 

       } 

      reader.readAsDataURL(input.files[0]); 
     } 
    }