0

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

我的插件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

注意：我使用的是 jQuery 1.10.1

4

2 回答 2

2

当您在该函数中时，您的“this”不再相同。请注意，您的 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 对象的对象，并保留对它的引用。我同意 :)

于 2013-08-16T01:09:16.117 回答
0

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

前一张：

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

更新 2：

如果你想公开，做 window.changeBackgroundColor()

于 2013-08-16T00:25:10.107 回答