Question

如何在jquery插件中添加回调函数，
我试图在handle点击

后插入一个回调函数

$.fn.dropdown = function(options) {
  // options
  var defaults = {
    multiple: false,
    afterClick: function() {},
  }; 
  if (typeof options === "undefined") {
    var options = defaults;
  }

  if ($(this).hasClass('multiple')) {
    options.multiple = true;
  }
  var settings = $.extend(defaults, options);
  // end: options

  var handle = $(this).find('.handle');
  var handle_text = $(this).find('.handle').text();
  var dropdown_list_container = $(this).find('.dropdown-list-container');

  // click
  $(handle).on('click', function() {
    var status = parseInt($(dropdown_list_container).attr('data-active'));
    if (status != 1) {
      $(dropdown_list_container).show();
      $(dropdown_list_container).attr('data-active', 1);
    } else {
      $(dropdown_list_container).hide();
      $(dropdown_list_container).attr('data-active', 0);
    }


  });
  // end: click

  // ..
};


$(el).dropdown({
  multiple: false,
  afterClick: function() {
    console.log('click');
  },
});

Answer 1

只需调用settings.afterClick函数（可能在DOM元素实例的上下文中）：

$(handle).on('click', function () {
    var status = parseInt($(dropdown_list_container).attr('data-active'));
    if (status != 1) {
        $(dropdown_list_container).show();
        $(dropdown_list_container).attr('data-active', 1);
    } else {
        $(dropdown_list_container).hide();
        $(dropdown_list_container).attr('data-active', 0);
    }

    settings.afterClick.call(this);
});

如果插件配置中未提供afterClick，则会调用默认的空函数：afterClick: function() {}。

在jquery插件中添加回调函数在执行某些操作后执行

1 个答案: