Question

我一直收到未定义的错误Cannot call method 'changeBackgroundColor'。我设置了一个click事件来调用我的插件中的公共方法。当以编程方式调用该方法时，它可以正常工作，但如果我单击该元素，则会收到错误。

我的插件html结构如下：

<div class="container">
    <div id="square"></div>
</div>

从插件中剪掉：

this.changeBackgroundColor = function() {
  $('#square').css('background','red'); 
};

//Note "this" is the .container so I bind click event to child square
    $('#square', this).bind('click', function () {
        //Error
       changeBackgroundColor(); 
    });

如果我致电$('.container').myPlugin().changeBackgroundColor();，那就有效了。但是，如果我从点击事件功能中调用changeBackgroundColor，则无法找到changeBackground功能。

链接到jsFiddle Here

注意：我正在使用jQuery 1.10.1

Answer 1

当你进入这个功能时，你的“这个”就不再一样了。请注意，您的jquery对象不是持久的，它们只是对HTMLElements集合的反思。考虑将您的事件存储在.data等中。

如果我要连续两次调用$（“。foo”），我有2个不同的对象，即使它们引用相同的HTMLElements。

但要修复错误，请执行以下操作：

this.changeBackgroundColor = function() {
    $('#square').css('background','red'); 
};

var _this = this;
$('#square', this).bind('click', function () {
    _this.changeBackgroundColor(); 
});

但问题是模式：）

您可能需要考虑这样做：

var events = {
    changeBackgroundColor: function() {
        square.css('background','red'); 
    },
    changeItMore: function() {
        square.css('background','purple'); 
    }
};

var square = $('#square', this).bind('click', function () {
    events.changeBackgroundColor(); 
});

square.data("myEvents", events);

现在可以从其他代码中执行以下操作：

var theObject = $(".foo", container).yourPlugin();
var yourEvents = theObject.data("myEvents");
yourEvents.changeBackgroundColor();

另一种常见模式是自定义事件，例如：

function changeBackgroundColor() {
    square.css('background','red'); 
}

var square = $('#square', this).bind('click', function () {
    changeBackgroundColor(); 
}).bind("changeBackgroundColor", function() {
    changeBackgroundColor(); 
});

现在您可以通过以下方式触发：

$(".foo", container).yourPlugin().trigger("changeBackgroundColor");

我接受的另一个常见模式，但其他人可能不会，是让你的插件返回一个不是jQuery对象的对象，并保持对它的引用。我是A'OK：）

Answer 2

更新：从函数中删除this，它将起作用。

前一个：

changeBackgroundColor = function() {
      $('#square').css('background','red'); 
};

更新2：

如果您希望公开，请执行window.changeBackgroundColor()

从jQuery插件中的事件处理程序调用公开公开的方法的问题

2 个答案: