如何从插件的函数参数中访问$(this)

时间:2014-09-29 06:01:47

标签: javascript jquery jquery-plugins

我正在编写一个jQuery插件,我需要有一个accept事件的处理程序,所以我在我的插件的opts对象中创建了一个。该插件可以像下面这样调用:

$("#btn2").click(function(){
  $("#dialog2").dialog("show", {
    modal: false,
    width: "500px",
    onAccept: function() {
      alert("Homepage changed.");
      $("#dialog2").dialog("close"); // this one works
      $(this).dialog("close"); // this one doesn't. $(this) is undefined...
      // $(this) should be $("#dialog2") in this case.
    }
  });
});

在插件中,可以调用此函数:

$.fn.dialog = function(command, options) {
  var opts = $.extend({}, $.fn.dialog.defaults, options);
  $(document).on("keydown", function(e) {
    if(e.keyCode == 27 && opts.acceptEscape) { commandClose() }
    if(e.keyCode == 13 && opts.acceptEnter) {
      if(opts.onAccept != null) { opts.onAccept(); }
    }
  });
}

我应该如何调用此功能 $(this) 才能在其中工作?

为了更好地了解我的问题,可以找到整个插件 here

1 个答案:

答案 0 :(得分:2)

您可以使用.call() / .apply()之类的

//assuming here `this` refers tot the correct element
var self = this;
$(document).on("keydown", function (e) {
    if (e.which== 27 && opts.acceptEscape) {
        commandClose()
    }
    if (e.which== 13 && opts.acceptEnter) {
        if (opts.onAccept != null) {
            opts.onAccept.call(self);
        }
    }
});

注意:还要使用event.which这是一个标准化值