jquery or javascript return tagName on dynamicly added elements
===

Hi I am trying to get the tagName of some elements that are added dynamically but each time I try that on click I get undefined.I created a simple example that simulates my situation.Here is my code:

     <ul>
          <li>sdsa</li>
          <li>dsa</li>
          
      </ul>
      <button>Press</button>

     $(document).ready(function(){
               var i=0;
               $("button").on("click" , function(){
                    $("ul").append("<li>" + i++ + "</li>");
               })
               
               $("ul").on("click" ,"li" , function(){
                   alert($(this).tagName);
               })
           })


Each time that I click on the li tags I get undefined.How can I solve this problem?

