Question

I’m using jQuery’s .on() event handler and it’s only working when I use $(document).

This works:

$(function() {
    $(document).on("click", ".search .remove", function(e) {
        console.log("clicked");
    });
});

This does not work:

$(function() {
    $(".search .remove").on("click", function(e) {
        console.log("clicked");
    });
});

Nothing happens on that second one…no errors or anything. It just doesn’t fire.

Answer 1

You are using two different syntaxes of .on which have two very different outcomes.

Your first is:

$(context).on("event","targetselector",handler)

This binds the event to context, and any events of type event that gets to the context that has an e.target that can be selected with targetselector will trigger the handler with e.target as the context. this is commonly known as event delegation.

Your second syntax is

$(targetselector).on("event",handler)

In this case, the event is bound directly to the elements currently on the page that match targetselector, not future elements. This is essentially the same as the old .bind.