jQuery-调用.change（）; 在javascript代码中不会触发

Question

In this question, all code has been generalized.
As the question title has explained, I have a jQuery function:

$(document).ready(function() {
    if (something) {
       // This does something
    } else if (something else) {
       // This does something else
    } else { 
       // And this does something else
    }
});

In this function, when the page loads, it checks for information that's on the web page.
I have a hidden input with a value that I check. This works.
I have 2 Drop down lists with two IDs (for the sake of argument): ddl1, ddl2

In MVC 4, they will look like this:

@Html.DropDownListFor(model => model.SelectedValue, Model.List1, new { id = "ddl1" })
@Html.DropDownListFor(model => model.SelectedValue, Model.List2, new { id = "ddl2" }) 

Next, I have two On Change jQuery methods, accordingly:

$("#ddl1").change(function () {
     // Does something when the index of the first drop down changes
});

$("#ddl2").change(function () {
    // Does something when the index of the second drop down changes
});

When I change the index on the page, these methods fire. Now, Here's where my question comes into play.

In my $(document).ready() function, I call those On Change function from this method, it does not fire...

$(document).ready(function() {
    if (something) {
       if (condition for ddl1) {
          $("#ddl1").change(); // Does not fire.
       } else {
          $("#ddl2").change(); // Does not fire.
       }
    } else if (something else) {
       // This does something else
    } else { 
       // And this does something else
    }
});

To me, this makes no sense why those functions are not firing.
It's a direct method call.
If someone can shed some light on this matter, i'll be thankful.

Cheers.

Answer 1

The proper way to trigger a change method using jQuery, is using trigger function, this way:

$(document).ready(function() {
  if (something) {
   if (condition for ddl1) {
      $("#ddl1").trigger("change"); // TRIGGER change event
   } else {
      $("#ddl2").trigger("change"); // TRIGGER change event
   }
  } else if (something else) {
   // This does something else
  } else { 
   // And this does something else
  }
});

More info here: http://api.jquery.com/trigger/

Answer 2

I modified my code to do the following (I went with just plain javascript, since I don't have the time to figure out why this is an issue):

1) I removed my on change jQuery method to a plain javascript function: From:

$("#ddl1").change(function () { /*code*/ });

To:

function changeDdl1 () { /*code*/ }

2) I took out the triggers to simply add a javascript call: From:

$("#ddl1").trigger("change");

To:

changeDdl1();

3) I added the @onchange MVC 4 attribute to my Drop Down Lists:

@Html.DropDownListFor(model => model.SelectedValue, Model.List1,
                      new { id = "ddl1", @onchange = "changeDdl1();"})

Thank you everyone who has provided help and hints.

Cheers.