jQuery 更改事件在 $(document).ready() 上手动触发时返回 null；

Question

我目前正在编写一个 JQuery 插件，它将颜色从 JSON Web 服务加载到下拉列表中。

下拉列表背景颜色根据所选值而变化。在大多数情况下，它正在工作。在任何常规更改上，它都按预期工作，我遇到的问题是在初始页面加载时我正在使用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");
  },
  ...
});

就是这样。