JQuery.trigger ("change") does not work

Question

I cannot get .trigger("change") to work. Does anyone know why?

 jQuery(document).ready(function () { jQuery("select[id='DROPDOWNID']").change(function () { var selectedIndex = jQuery("select[id='DROPDOWNID']").prop('selectedIndex'); switch (selectedIndex) { case 0: hideVarforProspekt(); break; case 1: hideOrdervarde(); break; case 2: break; case 3: hideSektor(); break; } }); ** jQuery("select[id='DROPDOWNID']").trigger("change"); ** function hideVarforProspekt() { jQuery("input[id='IDFROMSHAREPOINT']").closest('tr').hide(); } function hideSektor() { jQuery("table[id='IDFROMSHAREPOINT']").closest('tr').hide(); } function hideUppskOrder() { jQuery("input[id='IDFROMSHAREPOINT']").closest('tr').hide(); } }); 

Answer 1

Sometimes using a trigger is not required:

 // use just jQuery("#DROPDOWNID") instead var select = jQuery("select[id='DROPDOWNID']"); // placing the handler in separate function var changeHandler = function () { var selectedIndex = select.prop('selectedIndex'); switch(selectedIndex) { case 0: hideVarforProspekt(); break; case 1: hideOrdervarde(); break; case 2: break; case 3: hideSektor(); break; } } // cache your jQuery selectors. It a good practice // and improves the readability select.change(changeHandler); // triggering changeHandler(); 

Answer 2

A change event handler must be defined before calling .trigger('change') or .change()

Below are 2 scenarios.

Scenario 1: when a change event is raised before it is defined.

  $(document).ready(function() { $('#selector').change(); or $('#selector').trigger('change'); $('#selector').on('change', function(){ }); }); 

Scenario 2: where the change event handler is defined before it is called

 $(document).ready(function() { $('#selector').on('change', function(){ }); $('#selector').change(); or $('#selector').trigger('change'); }); 

For me, the problem was fixed when I use script2. Hope this helps!

Answer 3

Here is the working version using id syntax:

 $(document).ready(function () { $('select[id=car]').change(function () { alert("change: " + $(this).val()); }); $("#car").trigger('change'); }); 

Jsfiddle

Answer 4

used this:

 jQuery("#DROPDOWNID").trigger("change"); 

can you check this link Demo

HTML code

 <select id="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 

JQuery code

 $(document).ready(function(){ $("#car").change(function(){ alert("change"); }); $("#car").trigger('change'); }); 

Result:

This is a fire warning

Remove id = from all selectors and replace it with #selected id

Answer 5

The .change() event waits until the input field loses focus, so it will not be fired before you click or select from the field.

So, you can simply add the .blur() event after the .change() event as follows:

  var $element = jQuery("select[id='DROPDOWNID']"); $element.change(function () { ... }); $element.blur(); 

Or you can use another event instead of .change() , for example. .keyup() , .paste() , etc.

Answer 6

try this it should work

 $('#selector').change();