引用html中动态创建的元素

Question

我有一个输入字段（ search_text ），当用户输入多个字母时，该字段显示数据库中的图像（ id="demo2" ）。

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

问题是仅在用户输入了超过1个字母之后，图像html（ id="demo2" ）在Html DOM中不存在。

我现在有：

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

当我slowley输入searchterm并出现警报框时，此方法起作用，之后，当我单击图像时， draw()函数起作用。

当我取出alert ，它将无法正常工作。 警报以某种方式使用户可以等待直到加载/创建图像。 如何在没有警报的情况下实现这一目标？

谢谢！

Answer 1

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

请参阅下面的小提琴。 HEY按钮直到3秒后才会出现，但是由于我们如上所述将click事件绑定到了它，因此不会有任何问题。

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

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

Answer 2

使用setTimeout使其在单独的线程中运行，否则alert执行以下操作：

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

建议：

为什么不将元素添加到DOM来切换元素的显示，而不是在键入2个字符后创建它？