0

我目前正在编写一个 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" });




    });
4

1 回答 1

1

您正在执行一个 AJAX 请求来填充您的下拉列表，顺便说一下，这是一个异步请求。在这种情况下，您需要在successAJAX 请求的回调中触发事件。

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

就是这样。

于 2012-04-08T11:45:48.203 回答