title: Attaching event to future elements using jquery
body: <p>I am using jquery 1.8 and have to display popup when user clicks some area with class dropdown-toggle. I have attached the events using on while the page loads for the first time. </p>
  
  <p>Here is it</p>
  
  <pre><code>$('.dropdown-toggle').on("click", function (e) {
  console.log("dropdown toggle called");
  $(this).next('.dropdown').toggle();
  });
  $(document).on("click", function (e) {
  var target = e.target;
  console.log("click toggle called");
  if (!$(target).is('.dropdown-toggle') &amp;&amp; !$(target).parents().is('.dropdown-toggle')) {
  $('.dropdown').hide();
  }
  });
  </code></pre>
  
  <p>What i found that second event applies to elements added in future but the first one does not i.e. for a drop down menu added later, only "click toggle called" gets printed in console but for those elements added during start both "click toggle called" and "dropdown toggle called" gets printed. </p>
  
  <p>What is problem here? Does on applies only to document for future element or can it be applied to class or other elements too so that they apply to future elements? If not what is the solution?</p>