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> 

Вот JQuery, который добавляет загруженную фотографию в 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]); 
    } 
} 

, как вы можете видеть, когда файл загружен он вызывает щелчок на добавьте изображение в div, а img окружен контейнером изображения с идентификатором div id. Это то, что добавляется в текст после добавления img в div.

Я знаю, что это из-за предупреждения он показывает мне значение 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 вокруг текста. Это только после того, как изображение вставлено, и вы нажмете Enter для ввода снова. Я думаю, он считает, что после этого происходит изменение изображения при попадании на вход, а затем после этого последовательного нажатия клавиши.

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]); 
     } 
    }