Why does the .on event handler should go inside $(document).ready ?

First read difference between onclick vs click site:stackoverflow.com

and then why onclick inside document ready site:stackoverflow.com

event- bubbling or Capturing event bubble-up or trickle-down http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing

++ general search Did you try… http://www.codecademy.com/guidance/choose

google search == the Book == jquery [your question] site:developer.mozilla.org CSS [your question] site:developer.mozilla.org javascript [your question] site:developer.mozilla.org [your question] site:jquery.com [your question] site:getbootstrap.com

== discussions / opinions == jquery [your question] site:stackoverflow.com CSS [your question] site:stackoverflow.com javascript [your question] site:stackoverflow.com

== guidance == www.crockford.com [your question] site:crockford.com

• • http://javascript.crockford.com/code.html
• • http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page https://learn.jquery.com/events/event-delegation/ event- bubbling or Capturing event bubble-up or trickle-down http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing https://www.codecademy.com/articles/http-errors-404 https://www.codecademy.com/articles

https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes http://www.w3schools.com/jquery/jquery_ref_selectors.asp

== guidance == www.crockford.com http://javascript.crockford.com/code.html http://javascript.crockford.com/survey.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript www.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Code-Year https://www.codecademy.com/en/tracks/code-year?jump_to=4fce4211279bae0003006265

teach yourself javascript site:codecademy.com https://www.codecademy.com/en/tracks/teachyourself Meet JSON https://www.codecademy.com/courses/javascript-beginner-en-xTAfX/0/1?curriculum_id=50802b7d5225bf0200000767 Adding Event Handlers The Simple Way https://www.codecademy.com/courses/web-beginner-en-A0uwI/0/1?curriculum_id=50802b7d5225bf0200000767 JavaScript and Cookies https://www.codecademy.com/courses/javascript-beginner-en-5knNv/0/1?curriculum_id=50802b7d5225bf0200000767 Dealing with the DOM https://www.codecademy.com/courses/javascript-beginner-en-gwcYv/0/1?curriculum_id=50802b7d5225bf0200000767 JavaScript and CSS https://www.codecademy.com/courses/web-beginner-en-SEgtM/0/1?curriculum_id=50802b7d5225bf0200000767

Yourself Python: http://www.codecademy.com/courses/python-beginner-en-fymF4

It actually doesn’t matter if the handler is in the ready handler function body or not. I just passed exercise 13/14 with this:

$(document).ready(function () {
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');
    });
});
$(document).on('click', '.item', function () {
    $(this).remove();
});

and rightly so. The event listener binding is to the document, which is already present at load time so there is no need to defer it. No elements need to be loaded when this listener is attached.

I did it like this and it passed

$(document).on(‘click’,’.item’,function(){ $(‘#button’).click(function(){ var toAdd=$(‘input[name=checkListItem]’).val(); $(‘.list’).append(‘

‘); $(this).remove(); }); });