jQuery .on demo

Click event demo showing .on function with elements dynamically added to DOM.

HTML

<select id="sel">
  <option value="Volvo">Volvo</option>
  <option value="Audi">Audi</option>
  <option value="Saab">Saab</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Maruti">Maruti</option>
  <option value="Tata">Tata</option>
  <option value="Ferrari">Ferrari</option>
</select>
<div>

<ul>
<li id="Volvo" data-val="Volvo" > Volvo </li>
<li id="Audi" data-val="Audi">  Audi</li>
<li id="Saab" data-val="Saab" > Saab </li>
<li id="Mercedes" data-val="Mercedes">  Mercedes </li>
<li id="Maruti" data-val="Maruti">  Maruti </li>
<li id="Tata" data-val="Tata">  Tata </li>
<li id="Ferrari" data-val="Ferrari"> Ferrari</li>
</ul>

</div>

CSS

div
{
  height:50px;
  overflow-y: scroll;
    overflow-x: hidden;
}
.red
{
  color:red;
}

JavaScript

$(document).ready(function()
{
//var ulList ;


$('#sel').change(function() {
			
      var selListIndex = $(this)[0].selectedIndex;
      var myCar = $(this).val();
      console.log(selListIndex)
      $('li').removeClass('red');
      $('#'+myCar).addClass('red');
      alert($('li[a id=' +$('#'+myCar) +']').position);
      var scrollTome =selListIndex *  parseInt($('li').height());
      $("div").animate({ 
        scrollTop: scrollTome
      }, 600);
      alert('s');

});


});