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!
The on() is an inbuilt method in jQuery which is used to attach one or more event handlers for the selected elements and child elements in the DOM tree.
Definition and Usage The change() method triggers the change event, or attaches a function to run when a change event occurs. Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.
The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.
$('#b1'). on('click', function(){ $('#select_item'). trigger('change'); }); $('#select_item'). on('change', function(){ var jbyr = $(this).
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().
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With