引用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個字符后創建它？