.change() vs .on( "change", handler ) in jQuery

Question

I have an issue when I use jQuery to handle the trigger of change on my drop-down.

I use 2 pieces of code:

//---------- Case 1
$(document).on("change", "#drop-down-id", function () {
    alert(this.value);
});
//----------Case 2
$("#drop-down-id").change(function () {
    alert(this.value);
});

The first one running smoothly, but the second one is not triggered when I start the browser, but after I refresh my site, it works.

Do you have any idea?

My jQuery version: 1.11.1, and I've tested on Chrome 38, Firefox 32 and IE 11.

-- Edit: @JanR & Cheery: It seems like this:

<select id="drop-down-id">
    <% arr.each do |option| %>
        <option value="<%= option %>"><%= option %></option>
    <% end %>
</select>

I've used Rails 4.1 and arr is an array contains numbers.

-- Edit: I found out that the issue came from the Asset Pipeline of Rails, not the jQuery.

I put the JS code inside a script tag and it works in both case, but when I put it in the assets folder, the issue happens.

Thank you for your quick replies!

Answer 1

I recommend using case 1, since it is composed document to load change event, if you choose the elements are dynamically generated, use case 1 will be effective.

Also jquery doc said, .change () is a shortcut for .on ("change", handler), so I think eventually will use .on callback.

Answer 2

When using .on(), keep in mind that:

• Case 2, is an alias: .change(...) === .on("change", handler) - If the selector is omitted or is null, the event handler is referred to as direct or directly-bound (The handler is called every time an event occurs on the selected elements). In this case, if you want to bind something successfully to an element, you need to ensure it is already loaded.

• Case 1: .on("change", selector, handler) - If the selector is provided, the event handler is referred to as delegated (The handler is not called when the event occurs directly on the bound element, but only for descendants that match the selector). In this case, you don't need the element to be loaded or not at the time of your binding.

The benefits of doing it one way instead of the other are well explained in this answer from Difference between .on('click') vs .click().

Answer 3

In case one you are binding the change event on the document level to an element that's part of the document. At this stage it doesn't matter whether it exists or not yet (say it's created later or loaded later).

In the second case you are binding the event to an element that has to exist in the DOM already or the binding will fail. What can be happening is that your javascript is firing before the element has been loaded on the page.

Try wrapping case 2 in a $(document).ready() function like so:

$(document).ready(function(){
//----------Case 2
        $("#drop-down-id").change(function () {
              alert(this.value);
        });
});

This will ensure your javascript won't fire until the DOM is ready.