jquery delegate, on, live functions are not working on dynamic loaded DOM elements

Question

JQuery's delegate and related methods are not working. I only want to give suggestions for some user using javascript. In the dropdown element or suggestions i want to trigger click event so that i can find the selected value. I here added example jsfiddle demo to provide a better demo. And better if provide the solution on how to select suggestions on down or up arrow key.

Markup:

<span class="twitter-typeahead" style="position: relative; display:inline-block; direction: ltr;">
    <input id="query" type="text" class="form-control tt-query" placeholder="Search " autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: rgb(255, 255, 255);">
    <span class="tt-dropdown-menu" style="position: absolute;top: 100%;left: 0px;z-index: 100; display: none; right: auto; max-height: 250px;overflow-y: auto;"">
        <div class="tt-dataset-0" style="display: block;">
            <span class="tt-suggestions" style="display: block;">
             </span>
        </div>
    </span>
</span>

Script:

var _se = [
  'grocery store', 'dairy store', 'gym', 'newspapers', 'fruits store', 'vegetable store', 'medical store', 'beer shop'
];

var _tflag = true;
$('#query').on('input propertychange paste focus', function(e) {
  $('.tt-dropdown-menu , .tt-suggestions').css('display', 'block');
  $('.tt-suggestions').html('');
  for (i = 0; i < _se.length; i++) {
    if (_se[i].indexOf($(this).val()) >= 0) {
      $('.tt-suggestions').append("<div class='tt-suggestion' style='white-space: nowrap; cursor: pointer;' onclick='alert(this);'> <p style='white-space: normal;'>" + _se[i] + "</p> </div>");
    }

  }

  $('.tt-suggestions').delegate('click', '.suggestion', function() {
    alert('suggestion clicked');
  });
  /*$('.tt-suggestions').on('click','.suggestion',function(){
            alert('suggestion clicked');
        });*/

});


$('#query').on('blur', function(e) {
  //_tflag = false;
  $('.tt-dropdown-menu').css('display', 'none');
  //$('.tt-suggestions').html('');
});

Answer 1

Remove the blur event , hide the suggestions if you click outside of the input or suggestions box, change the class of the dynamically added element to suggestion

   var _se = [
  'grocery store', 'dairy store', 'gym', 'newspapers', 'fruits store', 'vegetable store', 'medical store', 'beer shop'

];
var _tflag = true;
$('#query').on('input propertychange paste focus', function(e) {
  $('.tt-dropdown-menu , .tt-suggestions').css('display', 'block');
  $('.tt-suggestions').html('');
  for (i = 0; i < _se.length; i++) {
    if (_se[i].indexOf($(this).val()) >= 0) {
      $('.tt-suggestions').append("<div class='suggestion' style='white-space: nowrap; cursor: pointer;' onclick='alert(this);'> <p style='white-space: normal;'>" + _se[i] + "</p> </div>");
    }

  }
});
$('.tt-suggestions').on('click', '.suggestion', function() {
  alert('suggestion clicked');
});
$('html').on('click', function(e) {
  if (!$(e.target).closest('.tt-suggestions,#query').length) {
    $('.tt-dropdown-menu').hide();//hide if its not the input or the suggestion list
  }
});

demo: https://jsfiddle.net/zvxbsruu/2/ or: https://jsfiddle.net/zvxbsruu/3/

Answer 2

delegate has been deprecated See: jquery delegate

you can use :

  $('.tt-suggestions').on('click',function(){
        alert('suggestion clicked');

  });
  $('#query').on('blur', function(e){
         //_tflag = false;
       setTimeout(function(){
        $('.tt-dropdown-menu').css('display','none');
       },200);

         //$('.tt-suggestions').html('');
  });

Answer 3

You can try the below by changing the selector with right class name ".tt-suggestion" as below,

$('.tt-suggestions').on('click','.tt-suggestion',function(){
            alert('suggestion clicked');
     });