Jquery改变事件在mozzila工作但不在crome中

时间:2016-07-07 08:57:50

标签: javascript jquery

change dropdownlist项目更改时Google Chrome未触发。

相同的脚本在Firefox中完美运行。

我使用了ui.dropdown,我试图绑定到更改事件。

这是我的脚本Dropdown.js

中的代码
(function ($, undefined) {
  $.widget("ui.Dropdown", {
    options: {
      defaultLabel: "Select...",
      dontDisplay: false
    },
    _create: function _create() {
      var self = this;
      var element = self.element;
      var options = self.options;

      // Element is a select element
      element.wrap("<div class='sc-dropdown'></div>");

      var parent = options.parent = element.parent();
      if (options.dontDisplay) {
        parent.addClass("sc-incompleteDropdown");
        return;
      }

      element.addClass("ui-helper-hidden-accessible");

      var selectedValue = element.val() || "";

      var list = $("<ul class='sc-dropdownOptions'></ul>");

      // Generate dropdown using options in select
      $("option", element).each(function (i, o) {
        o = $(o);
        var html = o.text();
        var value = o.attr("value");
        var label = o.data("label")
        var desc = o.data("description");

        if (value) {
          list.append("<li data-label='" + label + "' data-value='" + value + "' class='sc-dropdownMainOption " + (selectedValue == value ? "sc-selected " : "") + (desc ? "sc-dropdown-hasDescription " : "") + "'>" + html + (desc ? "<div class='sc-dropdown-description'>" + desc + "</div>" : "") + "</li>");
        }
      });

      var label = $(".sc-selected", list).data("label");
      if (!label || label == "undefined") {
        label = $(".sc-selected", list).html();
      }

      parent.append("<div class='sc-selectedDetail'>" + (label || options.defaultLabel) + "</div>");
      parent.append(list);
      parent.append("<div class='sc-graphics'></div>");

      var isVisible = parent.css("display") != "none";
      parent.css("display", "inline-block");

      if (!isVisible) {
        parent.hide();
      }

      $(document).bind("click", { self: self }, self._click);
      $(parent).bind("change", { self: self }, self._change);
      $(element).bind("focus", { self: self }, self._focus);
      $(element).bind("blur", { self: self }, self._blur);
    },
    refresh: function refresh() {
      var self = this;
      var element = self.element;
      var options = self.options;

      if (options.dontDisplay) {
        return;
      }

      var parent = options.parent;
      var selectedValue = element.val() || "";
      var list = $(".sc-dropdownOptions", parent);

      list.empty();
      $("option", element).each(function (i, o) {
        o = $(o);
        var html = o.html();
        var value = o.attr("value");
        var label = o.text();
        list.append("<li data-label='" + label + "' data-value='" + value + "'  class='sc-dropdownMainOption " + (selectedValue == value ? "sc-selected'" : "") + "'>" + html + "</li>");
      });

      $(".sc-selectedDetail", parent).html($(".sc-selected", list).data("label") || $(".sc-selected", list).html() || "");
    },
    disable: function disable() {
      var self = this;
      var element = self.element;
      var options = self.options;
      var parent = options.parent;

      parent.addClass("sc-disabled");
      element.attr("disabled", "disabled");
      $(".sc-dropdownOptions", parent).slideUp();
    },
    enable: function enable() {
      var self = this;
      var element = self.element;
      var options = self.options;
      var parent = options.parent;

      parent.removeClass("sc-disabled");
      element.removeAttr("disabled");
    },
    _click: function _click(event) {
      var self = event.data.self;
      var element = self.element;
      var options = self.options;
      var parent = options.parent;

      if (parent.is(".sc-disabled") || options.dontDisplay) {
        return;
      }

      var target = $(event.target);
      var list = $(".sc-dropdownOptions", parent);

      if (target.parents(".sc-dropdown")[0] == parent[0]) {
        if (target.is(".sc-selectedDetail") || target.parents(".sc-selectedDetail").length
                    || target.is(".sc-graphics") || target.parents(".sc-graphics").length) {
          if (list.is(":visible")) {
            list.slideUp();
          } else {
            list.slideDown();
          }
        } else if (target.is("li:not(.sc-selected)") || target.parents("li:not(.sc-selected)").length) {
          var item = target.is("li.sc-dropdownMainOption", parent) ? target : target.parents("li.sc-dropdownMainOption", parent);
          element.val(item.data("value"));

          $(".sc-selected", list).removeClass("sc-selected");
          item.addClass("sc-selected");
          $(".sc-selectedDetail", parent).html(item.data("label") || item.html());

          list.slideUp();
          element.change();
        } else {
          list.slideUp();
        }

        element.focus();
      } else {
        list.slideUp();
      }
    },
    _change: function _change(event) {

      var self = event.data.self;
      var element = self.element;
      var options = self.options;
      var parent = options.parent;

      if (options.dontDisplay) {
        return;
      }

      var target = $(event.target);
      var value = target.val();
      var list = $(".sc-dropdownOptions", parent);

      var item = $("li.sc-dropdownMainOption[data-value='" + value + "']", parent);
      $(".sc-selected", list).removeClass("sc-selected");
      item.addClass("sc-selected");

      var label = item.data("label");
      if (!label || label == "undefined") {
        label = item.html();
      }

      $(".sc-selectedDetail", parent).html(label);
    },
    _focus: function _focus(event) {
      var self = event.data.self;
      var element = self.element;
      var options = self.options;
      var parent = options.parent;

      parent.addClass("sc-focus");
    },
    _blur: function _blur(event) {
      var self = event.data.self;
      var element = self.element;
      var options = self.options;
      var parent = options.parent;

      parent.removeClass("sc-focus");
    }
  });
}(jQuery));

0 个答案:

没有答案