Question

我是jQueryUI小部件工厂的新手，因此我可能会问愚蠢。我想创建一个ajax工具提示，我可以通过一个选项设置ajax调用的url，但是这个选项在包含ajax调用的_mouseOver方法中是不可读的。

    (function($) {
        $.widget("ui.tooltip", {
   options: {
        url: ''
    },
  _create: function() {
      alert(this.options.url); //it works
      this.element.bind({
        mouseenter: this._mouseOver
      });
    },
  _mouseOver: function() { 
      alert(this.options.url); //it dosen't works
    },
  ...

正如我设定： $（“。text”）。tooltip（{url：“something”}）;

请有人帮助我。

Answer 1

(function ($) {
    $.widget("ui.tooltip", {
        self: null,
        options: {
            url: ''
        },
        _create: function () {
            self = this;
            self.element.bind({
                mouseenter: self._mouseOver
            });
        },
        _mouseOver: function () {
            alert(self.options.url); // it should work
        }
    });
})(jQuery);

在_mouseOver中使用“this”是指事件函数中的当前对象，而不是窗口小部件本身。您应该创建一个变量并将小部件（this）放在其上，以便能够在任何事件或方法中使用它。在jQuery中使用$ .each（）函数时会发现相同的行为。

Answer 2

在这种情况下，_mouseOver函数的“this”上下文是元素而不是jquery小部件。这就是为什么你没有获得options.url。

您可以尝试使用此代码作为开头：

_create: function() {
      alert(this.options.url); //it works
      this.element.tooltip = this;
      this.element.bind({
        mouseenter: this._mouseOver
      });
    },  
_mouseOver: function() { 
  alert(this.tooltip.options.url); //it dosen't works
},

没有经过测试。

我无法从私有方法中读取jQuery-UI小部件工厂选项

2 个答案: