javascript - 将一些 html 添加到带有 append 的 body 标记，但 html 的 id 不执行

Question

我已经用 append 将一些 html 添加到 body 标记中。但是当我放 的时候runOCR(url)，所有的功能都停止工作了。如何解决这个问题。

这是我的代码：

function body(){
  if (window.location.hostname.match(/www.w3schools.com/)){

   var large = '<div class="form-group"> \
   <input type="text" id="url" placeholder="Image URL" />\
     <div id="ocr_status"> </div>\
     <div>\
        <label>Filed1:</label>\
           <textarea id="text1" ></textarea>\
     </div>\

     </div>' ;


    $('body').append(large);

     $(".form-group").css({
     position: "fixed",
    top: "20px",
    right: "180px",
    'border-radius': '25px',
    'border': '2px solid #73AD21',
     'padding': '20px', 
      'background': 'blue',

       "font-size": "1.5em",
       "z-index": "1000",

          });

     function runOCR(url) {
  Tesseract.recognize(url)
  .then(function(result) {
  document.getElementById("text1")
  .innerHTML = result.text;
  document.getElementById('text1').focus();

  }).progress(function(result) {
  document.getElementById("ocr_status")
  .innerText = result["status"] + " (" +
  (result["progress"] * 100) + "%)";
  });
  }
  document.getElementById("url")
  .addEventListener("input", function(e) {
  var url = document.getElementById("url").value;
  runOCR(url);

标签： javascriptjquerygoogle-chrome-extension