如何讓父母div點擊項目元素和類模態

Question

我知道這個問題被問了很多次，但他們沒有幫助我。

我有情景，就像我點擊div是contenteditable=true，點擊後我按導航上傳按鈕上傳圖片。出現的模式和圖像應該上傳到所需的點擊分區。

問題是我無法上傳圖像在特定的div，我點擊模式出現和圖像得到應該上傳。

我完成了這個使用window.element但不是現在的工作，他說：

TypeError: window.element is undefined

這裏是我的代碼：

$(document).on("click", "#titleDescImage", function() { 
     $('#titledescImgModal').modal('show'); 
    }); 

    $("#titledescImg-input").change(function() { 
     $('#titledescImgModal').modal('hide'); 
     readImage(this, 'titledescImg'); 
    }); 

function readImage(input, check) { 
    if (input.files && input.files[0]) { 
     var FR = new FileReader(); 
     FR.onload = function (e) { 
     if (check == 'titledescImg') { 
       html = window.element.find("p").html(); 
       window.element.html(html + "<img src=" + e.target.result + " width=100 height=100/>"); 
      } 
     }; 
     FR.readAsDataURL(input.files[0]); 
    } 
} 

HTML是：

<div contenteditable="true" id="website-title" data-attr="heading" 
class="hidden-xs textEditor titleImg"><p style="text-align:center"><span 
style="font-size:36px"><span style="color:rgb(255, 0, 0)">Mohsin Site</span> 
</span><br type="_moz"></p></div> 

莫代爾HTML是：

<div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="titledescImgModal" class="modal fade in" style="display: block; padding-right: 13px;"> 
    <div role="document" class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> 
       <h4 id="myModalLabel" class="modal-title">Upload Image</h4> 
      </div> 
      <div class="modal-body"> 
       <input type="file" id="titledescImg-input"> 
      </div> 
      <div class="modal-footer"> 
       <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

按鈕HTML：

$('<button class="btn btn-default" id="titleDescImage" type="button" 
style="border-radius: 4px;float: right;margin-right: 45px;margin-top: 
-45px;"><span class="glyphicon glyphicon-picture"></span></button>'); 

Answer 1

有沒有像window.element。我猜你正在尋找window.document。此外，由於你已經使用jQuery，你爲什麼不這樣的代碼：

var html = $(".textEditor.activeNow p").html(); 
$(".textEditor.activeNow p").html(html + "<img src=" + e.target.result + " width=100 height=100/>"); 

或者只是追加像這樣 -

$(".textEditor.activeNow p").append("<img src=" + e.target.result + " width=100 height=100/>"); 

您需要點擊/焦點事件處理程序，知道哪些是文本編輯有效

$('.textEditor').on('click',function() { //You can use 'focus' in place of 'click' 
    $('.textEditor').removeClass('activeNow'); 
    $(this).addClass('activeNow'); 
});