Question

我目前正在编写一个JQuery插件，可以将JSON Web服务中的颜色加载到下拉列表中。下拉列表背景颜色根据所选值而变化。在大多数情况下它是有效的。在任何常规更改它按预期工作，我遇到的问题是在初始页面加载我使用triggerHandler（“更改”）;它触发但我似乎从页面加载下拉列表中的选定值上得到一个未定义的错误，因此它不会触发下拉列表中的颜色更改

我的代码是：

$.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");
  },
  ...
});

就是这样。

当手动触发$（document）.ready（）时，jquery change事件返回null。

1 个答案: