title: How to add click events for dynamically appended elements using jquery?
body: <p>here i'm able to remove box100 and box200 when clicked but not able to remove box1-box5 after appending it to the list. How do I select the appended elements?</p>
  
  <p><a href="https://jsfiddle.net/uhmgj8ky/4/" rel="nofollow">https://jsfiddle.net/uhmgj8ky/4/</a></p>
  
  <pre><code>html
    &lt;ul&gt;
    &lt;li class='list'&gt;remove box100&lt;/li&gt;
    &lt;li class='list'&gt;remove box200&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class='box' box='box1'&gt;add box1&lt;/div&gt;
    &lt;div class='box' box='box2'&gt;add box2&lt;/div&gt;
    &lt;div class='box' box='box3'&gt;add box3&lt;/div&gt;
    &lt;div class='box' box='box4'&gt;add box4&lt;/div&gt;
    &lt;div class='box' box='box5'&gt;add box5&lt;/div&gt;
  
  css
  .box{
    height:50px;
    width:50px;
    border:2px solid blue;
    display: inline-block;
  }
  ul li{
      height:50px;
    width:50px;
    border:2px solid blue;
    display: inline-block;
    margin-right: 1px;
  }
  
  jquery
  $('.box').on('click', function(){
      var txt = $(this).attr('box');
      $('ul').append("&lt;li class='list'&gt;remove "+txt+"&lt;/li&gt;");
  });
  
  $('.list').on('click', function(){
      $(this).remove();
  });
  </code></pre>