title: jQuery change event returns null when manually fired on $(document).ready();
body: <p>I'm currently writing a JQuery plugin that loads colors from a JSON web service into a drop down list. </p>
  
  <p>The drop down list background-color changes according to the selected value.  For the most part it is working.  on any regular change it works as expected, the problem I am having is on the initial page load I am using <code>triggerHandler("change");</code> and it triggers but I seem to be getting an undefined error on the selected value from the drop down list on page load so it doesn't trigger the color change on the drop down list </p>
  
  <p>My code is:</p>
  
  <pre><code>$.fn.bindColorsList = function (options) {
  
      var defColor = options.defaultColor;
      var svcUrl = options.svcurl;
      //var f_target = options.filterTarget;
      var $this = this;
  
      $.ajax({
          url: options.svcurl,
          dataType: 'json',
          /*data: { filter: src_filt },*/
          success: function (fonts) { fillcolors(fonts, $this) },
          error: function () { appendError(f_target, "colors failed to load from server") }
  
  
      });
  
  
      this.on("change", function (event) {
          log($(event.target).attr("id") + " change detected");
  
          //change ddl dropdown color to reflect selected item ;
          var hcolor = $this.find('option:selected').attr("name");
  
  
          $this.attr("style", "background-color:" + hcolor);
  
  
      });
  
  function fillcolors(colors, target) {
  
      $(target).empty();
      $.each(colors, function (i, color) {
          $(target).append("&lt;option name='"+color.HexValue+"' value='" + color.Name + "' style='background-color:"+color.HexValue+"'&gt;"+color.Name+"&lt;/option&gt;");
      });
  };
  
  
  
  //in a seperate file
      $(document).ready(function () {
  
          $("#dd-font-color").bindColorsList({ svcurl: "/home/colors"});
          $("#dd-back-color").bindColorsList({ svcurl: "/home/colors" });
  
  
  
  
      });
  </code></pre>