Why cant i select an added via .append?

Question

When i add an <li> with the css below i can select the item but if i add it using .append i cannot what am i doing wrong?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="events" class="select" name="events">
<li>Opt 1</li>
</ul>

.

$('ul.select li').click(function(e){
  var item = $(e.target);
  item.addClass('selected');
  item.siblings().removeClass('selected');
  $('#events').val(item.text());
});

$('#events').append('<li>Opt 2</li>');

.

ul.select {
   list-style: none;
   margin:  0;
   padding: 2px;
   height:50vh;
   overflow-x: hidden;
   border: 1px solid grey;
   width: 50vw;
   background-color: black;
   color: white
}

ul.select li {
   padding: 2px 6px;
}
ul.select li:hover {
   cursor: pointer;
}
ul.select li.selected {
   background-color: lightgrey;
   color: black;
}

See Fiddle for example of issue.

Answer 1

$('ul.select li').click will add an event listener to all elements, which match this selector, at the time of the code being called. The following will work:

$('.select').on('click', 'li', function(){
    // code here 
});

This is called event delegation. Essentially you add an event listener to an element higher up the chain (.select). The click event is then propegated up to the element higher up the chain (.select) and if e.target matches the selector (li), the callback is called.