title: jquery adding elements to li not working
body: <p>Hello everybody</p>
  
  <p>I am having a problem with adding elements to <code>&lt;li&gt;</code> from jquery,</p>
  
  <p>this is my jquery code </p>
  
  <pre><code>$(".div1").on('click','li',function(){
          var phonenumber = $(this).text();
          $("#phones ul").append("&lt;li&gt;"+phonenumber+"&lt;/li&gt;");
      });
  </code></pre>
  
  <p>but when click on the <code>div1</code> nothing happend, what am i doing wrong please?</p>
  
  <h3>note</h3>
  
  <p>when i alter <code>phonenumber</code> i got the information that i need.</p>
  
  <h3>edit</h3>
  
  <pre><code>    &lt;div class="div1"&gt;
  &lt;li&gt;press here to show your phone number&lt;/li&gt;    
  &lt;div id="phones"&gt;
  &lt;ul&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>