jQuery_Question about the DOM and .on Event Handler

1

I am currently working through the jQuery course on Codecademy. In the lesson on the .on event handler, the instructors explain that the following piece of code:

$('.item').click(function() {
    $(this).remove();
});

will not work with the .remove() function. To quote them, “jQuery looks for all the .items when the DOM is loaded, so by the time your document is ready, it’s already decided there are no .items to .remove(), and your code won’t work.”

My question is why this does not hold true for other functions such as .toggleClass in

$(document).ready(function() {
    $('#text').click(function() {
        $(this).toggleClass('highlighted');
    });
});

The DOM recognizes the id tag ‘text’ and is able to perform the click and toggleClass functions on it. Thank you for the help.

2

The link to the lesson is here: https://www.codecademy.com/en/courses/web-beginner-en-v6phg/2/4?curriculum_id=50a3fad8c7a770b5fd0007a1.

3

You’re showing two different things here. The code block with remove is not contained inside a document.ready block, where the toggleClass block is inside a document.ready.

$(document).ready(function() {});

Doesn’t start executing the code inside of it until the DOM has fully load. You can also use

$(function() {} );

Essentially, their first example is run before the DOM is loaded, so $('.item') returns nothing.

4

Codecademy writes that this is the correct formula:

$(document).on('event', 'selector', function() {
    Do something!
});
5

$(document).on('event', 'selector', function() { Do something! });

This is the longest syntax for assigning an event handler. The event could be anything from click to load, the selector portions lets you do event delegation, which essentially means (in this context), “starting from ‘document’, when this event happens, fire this function if the event happened for this selector.”

If you’re simply checking if the DOM is loaded, $(...) will suffice.

1 Like
6

To make sure I understand, I can use .on with other functions, but it is not necessary. As you said, the first example is run before the DOM is loaded. How about the second example (click and toggleClass)?

7

When you use jQuery to select an object, $('.someClass') it returns a “jquery object” back to you. The jQuery object has an API that let’s you make all manner of function calls on it, including the .on() function. There are short hand methods for .on() as well, like, .click(); I prefer to use .on() though.

Any javascript you wrap inside the $(document).on('ready'...) event will only be called when the DOM has fully loaded. That applies to your second example.

1 Like
9

Thank you. This makes more sense.

1 Like
10

This is not indicative of the code samples you put.

My explanation would explain why your code samples behave differently, but I did not address the CodeAcademy course. Everything I said is correct as far as the code samples go. You are not using event delegation there.

Essentially, your first post is asking something different than your second post.

11

For example, this code which is exactly like your first code example will run correctly, without using event delegation. Event delegation can also fix this issue, because it’s not dependent on the DOM being loaded (if you are binding to the document object), however, keep in mind that event delegation will add a performance hit when the event is actually called.

Furthermore, all of your code should be wrapped inside of a document ready block regardless.

$(function () {
    $('.submit').on('click', function () {
        console.log('test');
    });
});
1 Like