jQuery .click() not working in search suggestion

Question

i want to create search suggestion. input type is created in this way:

 <div class="signup_content_3">
   <div class="signup_fieldName">
      <p>
          title
      </p>
   </div>
   <div class="signup_text signup_input signup_search_parent" id="signup_flavorActor">
       <input type="text" class="signup_searchType">
       <div class="signup_suggestion">

       </div>
   </div>

my jQuery function to find key up is:

$('.signup_searchType').keyup(function(event){
  $.ajax({url:"http://localhost:8000/auth/search/",success:function(result){
        id=event.target.id;
        var parent=event.target.parentElement.parentElement;
        var add=parent.getElementsByClassName('signup_suggestion')[0];
        add.style.display='block';
        var child=add.firstChild;
        while(add.firstChild){
            add.removeChild(add.firstChild);
        }
        for(var i=0;i<Object.keys(result).length;i++){
            var div=document.createElement('div');
            div.innerHTML=result[i];
            div.className='signup_oneSuggestion';
            add.appendChild(div);
        }
    }})
});

and my jQuery click function is:

$('.signup_oneSuggestion').click(function(event){
    console.log('click');
});

when i type in search type search suggestions appear but when i click on them does not print anything in console.

Answer 1

Use .on() (jQuery 1.7) with the element's ancestor, since it is created dynamically

$('.signup_suggestion').on('click', '.signup_oneSuggestion', function(event) {
  console.log('click');
});

Answer 2

Dynamically created elements can be assigned an event in this way

$('body').on('click', '.signup_oneSuggestion', function(event) {
  console.log('click');
});