Jquery change method via trigger not working

Question

HTML:

<select id="g_contracts">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

JS:

$(document).ready( function() {
    $("#g_contracts").trigger("change");

    $("#g_contracts").on("change", function() {
         alert(44);
    });
});

Well, alert happens when I directly change selector, but trigger("change") not causes anything.

What I missed ?

https://jsfiddle.net/c7t398mf/2/

you are triggering before attaching the event. do it after that — Muhammad Usman, Jul 16 '19 at 07:08
You are calling a change trigger before even assigning a change eventlistener. That is why nothing is happening. — Krishna Prashatt, Jul 16 '19 at 07:09
Are you trying to change value programatically? If so, then you have to use it like this: $("#g_contracts").val(3); — IonV, Jul 16 '19 at 07:09

Mamun · Accepted Answer · 2019-07-16T07:13:29.800

Trigger the event after assigning the event handler to the element:

$(document).ready( function() {
  $("#g_contracts").on("change", function() {
    alert(44);
  });
  $("#g_contracts").trigger("change");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="g_contracts">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

score 1 · Answer 2 · answered Jul 16 '19 at 07:14

The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements.

    $(document).ready( function() {
    
      $("#g_contracts").on('change',function(){
        alert("44");
      });

      $("#g_contracts").trigger('change');

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select id="g_contracts">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

Jquery change method via trigger not working

2 Answers2