jquery changeイベントは、$（document）.ready（）;で手動で起動するとnullを返します。

Question

現在、JSON Webサービスの色をドロップダウンリストに読み込むJQueryプラグインを作成しています。 ドロップダウンリストの背景色は、選択した値に応じて変化します。ほとんどの場合、それは働いています。どのような通常の変更でも、期待通りに動作しますが、私が持っている問題は、最初のページの読み込み時にtriggerHandler（ "change"）を使用しています。そしてそれが引き金が、私はそれがドロップダウンリスト上の色の変化を引き起こさないように、ページのロードのドロップダウンリストから選択した値に未定義のエラーを得ているようだ

私のコードは次のとおりです。

$.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("<option name='"+color.HexValue+"' value='" + color.Name + "' style='background-color:"+color.HexValue+"'>"+color.Name+"</option>"); 
    }); 
}; 



//in a seperate file 
    $(document).ready(function() { 

     $("#dd-font-color").bindColorsList({ svcurl: "/home/colors"}); 
     $("#dd-back-color").bindColorsList({ svcurl: "/home/colors" }); 




    }); 

Answer 1

あなたは、非同期のドロップダウンリストを作成するためにAJAXリクエストを実行しています。この場合は、AJAXリクエストのコールバックsuccessでイベントをトリガーする必要があります。

var $this = this; 

// Bind the onchange event 
$this.on("change", function (event) { 
    .. 
}); 

// Populate using AJAX 
$.ajax({ 
    ... 
    success: function (fonts) { 
    // Populate the values 
    fillcolors(fonts, $this); 
    // Trigger the event 
    $this.trigger("change"); 
    }, 
    ... 
}); 

これだけです。