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!

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!

• javascript
• jquery
• ruby-on-rails

• 2 Can you reconstruct the problem at, let say, jsfiddle.net? Does this select created dynamically or not? – Cheery Commented Oct 28, 2014 at 2:25
• 2 case 1 can be used to elements even if your element still not exists in the html. case 2 should be used inside the dom ready function to work, so that all elements in the html are loaded. – roullie Commented Oct 28, 2014 at 2:27
• 1 @haitran yes the select created dynamically. it means, probably, that at the moment of the listener assignment it does not exists. With refresh browser reads from cache and select on its place almost instantly. You should call .change( when element already exists. – Cheery Commented Oct 28, 2014 at 2:34
• 2 In the future, for a question related to HTML/JavaScript, your server-side language is of no consequence. You want to show people the same code that the browser sees, i.e. the HTML produced by the server. However, a tiny snipped of just a <select> isn't going to help solve complex interaction problems. You usually need to create a pared-down test case using the minimal amount of code (HTML, JavaScript, and CSS) to reproduce your problem. Spending time creating this test case will teach you something, usually show you the problem, and if not, it provides helpers with a solid foundation. – Phrogz Commented Oct 28, 2014 at 3:12
• 1 P.S. In HTML, if you want the value of an option to be the same as what it displays, you do not need a value="…" attribute. – Phrogz Commented Oct 28, 2014 at 3:13

3 Answers 3

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.

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().

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.