在 html 中引用动态创建的元素

Question

我有一个输入字段 (search_text)，当用户输入超过 1 个字母时，它会显示数据库中的图像 (id="demo2")。

然后我有一个绘制函数 (draw())，它应该在单击图像时执行某些操作（在从数据库中显示后）。

问题是图像 (id="demo2") 在 Html DOM 中不存在，只有在用户输入超过 1 个字母后才会出现。

现在，我有：

function myFunction(){
  console.log('success');
  alert("I am an alert box!");
  console.log('success2');
 var x = document.getElementById("demo2");
 console.log(x);
 x.addEventListener("click", myFunct);
 console.log(x);
}

function myFunct(){
  currentImg=document.getElementById("demo2");
 draw();
}


function myFunction2(){
  //alert("I am an alert box!");
  var x = document.getElementById("search_text").value;
  if (x.length >2){myFunction();} 
  }

当我慢速输入搜索词时会起作用，然后会出现警告框，然后，当我单击图像时，draw() 功能会起作用。

当我取出 alert 时，它不起作用。不知何故，警报让用户等到图像 loaded/created。我如何在没有警报的情况下实现这一目标？

谢谢！

Answer 1

使用 setTimeout 使其成为运行在一个单独的线程中，这将是 alert 在其他情况下所做的：

function myFunction2(){
  setTimeout(function(){
       var x = document.getElementById("search_text").value;
       if (x.length >2){
           myFunction();
       } 
  },100)//keep minimal time.
}

建议:

Why don't you add element to DOM toggle the display of an element instead of creating it after typing 2 chars?

Answer 2

您可以使用 jQuery 函数 $.on() 将动作绑定到尚未创建的元素。您只需将它指定在代码为运行时存在的元素上，例如 body 元素。

请参阅下面的 fiddle。 HEY 按钮在 3 秒后才会出现，但是由于我们如上所述将点击事件绑定到它，所以我们不会有任何问题。

//This is how you bind to a dynamically created element
$('body').on('click', '.myclass', myFunction);

setTimeout(function() {
  var button = document.createElement('button');
  button.className = "myclass";
  button.appendChild(document.createTextNode("HEY"));

  $('#button-cell').append(button);
}, 3000);

function myFunction() {
  alert("It's working!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="button-cell"></td>
  </tr>
</table>

即使这可行，我还是建议您考虑直接添加元素，然后切换它们的可见性。

在 html 中引用动态创建的元素

referencing a dynamically created element in html

html

javascript

jquery

dynamically-generated