title: onclick listener is not working with dynamic dom content
body: <p>With jquery on several event i required to add elements but on that elements click event is not triggered. I tried to add the listener in the ready function also but it doesn't worked. Anyone please help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready(function(){
     $('#button').click(function(){
         var toAdd = $('input[name=checkListItem]').val();
         $('div.list').append('&lt;div class="item-next"&gt;' + toAdd + '&lt;/div&gt;')
  
     });
   
  });
  
   $('.item-next').click(function(){
        alert()
  
     });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
       &lt;title&gt;Find Listeners&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"/&gt;
          &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;h2&gt;Find Listeners&lt;/h2&gt;
    &lt;form name="checkListForm"&gt;
     &lt;input type="text" name="checkListItem"/&gt;
    &lt;/form&gt;
    &lt;button id="button"&gt;Click to Add&lt;/button&gt;
    &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
        List
    &lt;div class="list"&gt;&lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>