引用html中动态创建的元素

Question

I have an input field( search_text ), which shows the images ( id="demo2" ) from a database when the user puts in more than 1 letter.

And then I have a draw function ( draw() ) that is supposed to do something when the image is being clicked, (after it got displayed from the database).

The problem is the image ( id="demo2" ) does not exist in the Html DOM, only after the user has put in more than 1 letter.

Now, I have:

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

which works when I slowley type in the searchterm and the alertbox comes and after that, when I click the image, the draw() function works.

When I take out the alert it won't work. Somehow the alert lets the user wait until the image is loaded/created. How do I achieve this without the alert?

Thanks!

Answer 1

You can use the jQuery function $.on() to bind an action to a not yet created element. You just specify it to be on an alement that exists when the code is running, such as the body element.

See the fiddle below. The HEY button wont appear until after 3 seconds, but since we bind the click event to it as described above, we wont have any problem.

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

Even though this works, I'd suggest you might look into adding your elements directly and then toggling their visibility.

Answer 2

use setTimeout to make it run in a separate thread which would be what alert does otherwise:

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

Suggestion:

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