Question

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

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

问题是Html DOM中不存在图像（id="demo2"），只有在用户输入超过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();} 
  }

当我慢慢键入searchterm并且警报器出现时，它起作用，之后，当我点击图像时，draw()功能起作用。

当我取出alert时，它将无效。不知何故，警报让用户等到图像被加载/创建。如何在没有警报的情况下实现这一目标？

谢谢！

Answer 1

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

请参阅下面的小提琴。 {3}之后，HEY按钮才会出现，但由于我们如上所述将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个字符后创建它？

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

2 个答案: