javascript - 引用 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() 函数就会起作用。

当我取消警报时，它就不起作用了。不知何故，警报让用户等待图像加载/创建。在没有警报的情况下如何实现这一目标？

谢谢!

Answer 1

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

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

//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>

尽管这可行，但我建议您可以考虑直接添加元素，然后切换它们的可见性。