JavaScript What is acctually .val().trigger('change') doing? what actually triggers labor,what actually triggers labour,what does

I'm confused by this line in my project:

This id: categories-product belong to <select> and I've seen in project someone wrote this: And I'm wondering what this basically means ?

$('#categories-product').val(product.category.id).trigger('change');

Please could anyone explain me this?

Thanks

Answer:1

trigger('change') will actually allow the javascript runtime to execute the change event for the element. If you have associated any change event to that element then this will allow to explicitly trigger that change event.

Actually, the work of trigger() is to just execute all handlers and behaviours attached to the matched elements for the given event type. And specifying the event name as a parameter will only trigger that event. Like,

trigger('change') //triggers the change event listener only

trigger('click') //triggers the click event listener only

So, your code

('#categories-product').val(product.category.id).trigger('change');

Will set the value of the #categories-product and then this will explicitly trigger the change event so that the change action that is associated with this element is executed.

Answer:2

Most jQuery methods provide chaining by returning this (which is the jQuery set you called the method on). This is an absolutely key part of the jQuery API. val is one of those methods. So that code is doing this:

$('#categories-product').val(product.category.id);
$('#categories-product').trigger('change');

...but without having to look up the element a second time.

So it's setting the value of the select, and then triggering the change event on it (presumably so handlers for that event do something).

Answer:3

To understand it better you can break this line in 2 statements

$('#categories-product').val(product.category.id);
$('#categories-product').trigger('change');

Now, it is clear that the first line sets the value and second line triggers the change event. The above is just a shorthand way of clubbing the statements into one statement.

Answer:4

There must be a drop down i-e select tag in your DOM with id as categories-product.

And

$('#categories-product').val(product.category.id).trigger('change');

is setting some value as selected value and then triggering a change event so that if there is any listener added for change event on that selector, the callback should be executed

Answer:5

I've tried to use this comparison statement and was almost sure that's gonna work, but it's not. Could you explain why ? let a = 1 a === ( 1 || 3 ) // true a === ( 3 || 1 ) // false Thanks for ...

I've tried to use this comparison statement and was almost sure that's gonna work, but it's not. Could you explain why ? let a = 1 a === ( 1 || 3 ) // true a === ( 3 || 1 ) // false Thanks for ...

I have the following html setup and cannot solve this issue. When a button in the html document gets clicked, an element <div id='wrapper'> <input id='fileUpload' name='fileUpload' ...

I have the following html setup and cannot solve this issue. When a button in the html document gets clicked, an element <div id='wrapper'> <input id='fileUpload' name='fileUpload' ...

  1. javascript call function later
  2. javascript run function later
  3. javascript execute function later
  4. javascript call function defined later

So I have a css grid layout with "boxes" inside, that I filter with a text input and javascript. How can I hide the filtered out elements so that they don't even take up space within the grid (so the ...

So I have a css grid layout with "boxes" inside, that I filter with a text input and javascript. How can I hide the filtered out elements so that they don't even take up space within the grid (so the ...

I want to generate HTML-code at the beginning of an existing element. This is the existing HTML-element: <div id="container"> <p>end of the element</p> </div> With my ...

I want to generate HTML-code at the beginning of an existing element. This is the existing HTML-element: <div id="container"> <p>end of the element</p> </div> With my ...