Event Delegation With JQuery

$(function(){
  $('.calendar').click(function(){
    showCalendarPopup();
  });
});

$(function(){
  $('.calendar').click(function(){
    showCalendarPopup();
  });
});

• Need to wait until DOM is ready to bind events
• Selectors tie presentation and behavior together
• Memory leaks if DOM elements removed incorrectly
• If we add another .calendar, it won't have the binding

$(function(){
  $('.calendar').live('click', function(){
    showCalendarPopup();
  });
});

• Need to wait until DOM is ready to bind events
• Selectors tie presentation and behavior together
• Memory leaks if DOM elements removed incorrectly
• If we don't add a new .calendar, it won't have the binding

$(document).on('click', '[data-calendar]', function(){  showCalendarPopup();});

$(document).on('click', '[data-calendar]', function(){  showCalendarPopup();});

<form>  <p>    <label for='start_date'>Start Date</label>    <input id='start_date' type='date'>    <i class='calendar' data-calendar></i>  </p>  <p>    <label for='end_date'>End Date</label>    <input id='end_date' type='date'>    <i class='calendar' data-calendar></i>  </p></form>

$(document).on('click', '[data-calendar]', function(){  showCalendarPopup();});

• Bind as soon as javascript executes
• Can use more complex selectors and segregate presentation and behavior
• No memory leaks from dangling DOM elements
• Every element that matches '[data-calendar]' is correctly bound, regardless of when it shows up on the page