title: jQuery hover is not working when load data for autocomplete
body: <p>This code is not working:</p>
  
  <pre><code>$("ul.lst li").hover(function (event) {   
      $('#span').text($(this).index());
  });
  </code></pre>
  
  <p>When use the same code and hard coded html, mouse-over works smooth and give the hovered <code>li</code> index.
  What am I missing? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var records = [];
  var selectedIndex = null;
  var selectedRecord = null;
  var fRecords = [];
  var autocomplete = function (event, el) {   
      var search = el.value;
  
      if (event.key === "ArrowDown") {
         
          if(records == null) return;  // if no result
  
          if (records.length &gt; 0 &amp;&amp; selectedIndex == null) {
              selectedIndex = 0;           
          }
          else if (records.length &gt; 0 &amp;&amp; selectedIndex &lt; records.length - 1) {
              selectedIndex++;
          }
          changeClass(selectedIndex);
      }
      else if (event.key === "ArrowUp") {
          if (records == null) return;  // if no result
  
          if (records.length &gt; 0 &amp;&amp; selectedIndex == null) {
              selectedIndex = 0;
          }
          else if (records.length &gt; 0 &amp;&amp; selectedIndex &gt; 0) {
              selectedIndex--;
          }
          changeClass(selectedIndex);
      }
      else if (event.key === "Enter") {
  
      }
      else {
          selectedIndex = null;
          selectedRecord = null;
  
          if (records.length === 0) {
              $.get('https://jsonplaceholder.typicode.com/comments')
                  .done(function (data) {
                     
                      records = data;
                      // sort by name
                      sort(records);
  
                      showAutoComplete(records, search);
                  });
          }
          else {
              showAutoComplete(records, search);
          }
      }
  }
  
  var showAutoComplete = function (data, search) {
      search = search.toUpperCase();
      fRecords = [];
      $.each(data, function (k, v) {
          if (v.name.toUpperCase().startsWith(search)) {
              fRecords.push(v);
              if (fRecords.length &gt; 9)
                  return false;
          }
      });
  
      $("ul.lst").empty();
      if (fRecords.length &gt; 0)
          $("ul.lst").addClass("suggest");
      else
          $("ul.lst").removeClass("suggest");
      $.each(fRecords, function (key, value) {
          $("ul.lst").append('&lt;li&gt;' + value.name + '&lt;/li&gt;');
      });
  }
  
  var sort = function (records) {
      records.sort(function (a, b) {
          var nameA = a.name.toUpperCase(); // ignore upper and lowercase
          var nameB = b.name.toUpperCase(); // ignore upper and lowercase
          if (nameA &lt; nameB) {   return -1; }
          if (nameA &gt; nameB) { return 1; }
          // names must be equal
          return 0;
      });   
  }
  
  var changeClass = function (index) {
  
      selectedRecord = records[selectedIndex];
      $("ul.lst&gt;li.active").removeClass("active");
      if (selectedIndex != null) {
          $($("ul.lst&gt;li")[selectedIndex]).addClass("active");
          $('#company').val($($("ul.lst&gt;li")[selectedIndex]).text());
      }
  }
  
  $('#company').keyup(function () { autocomplete(event, this); });
  
  $('#company').blur(function(){
      $("ul.lst").removeClass("suggest");
  })
  
  //$("ul.autocomplete li").hover(function (event) {
  //        debugger;
  //        selectedIndex = $(this).index();
  //        changeClass(selectedIndex);
  //        console.log(selectedIndex);
      
  //});
  
  
  $("ul.lst li").hover(function (event) {
     
      $('#span').text($(this).index());
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul.lst {
      display: none;
  }
  ul.lst.suggest {
          display:block;
         
      }
      ul.lst li {
          list-style: none;
          padding: 7px 12px;
          border: 1px solid #bbb;
          white-space: nowrap;
          overflow: hidden;
      }
       ul.lst &gt; li.active {
          background-color: #ffcc66;
          color: #000;
         z-index:1000;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class='col-sm-10 offset-col-1 mt-4'&gt;
    &lt;strong&gt;Type something for auto complete&lt;/strong&gt;
    &lt;span id='span'&gt;&lt;/span&gt;
    &lt;input type='text' id='company' class='form-control'&gt;
    &lt;ul class='lst'&gt;&lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>