Mootools——从绑定的 css 类调用类函数会导致“不是函数”错误

发布于 2024-11-19 15:18:32 字数 953 浏览 0 评论 0原文

使用Mootools 1.3.2

代码如下：

var DNReportAbuse = new Class({

Extends: DNUserDialog,
comment_id: null,
container: null,

initialize: function(classname) 
{
    var bindclass = $(document.body).getElements(classname);

    bindclass.each(function(el) {
        el.addEvents({
            click: function() {
                this.reportComment();
            }.bind(this)
        });
    });
},

reportComment: function() {
    this.preventDefault();
    alert('hello');
    return false;
}
});

事件确实绑定，当“this.reportComment();”时替换为“alert('hello world');”它完全可以工作......

但是当使用“this.reportComment()”时，我反而收到一个错误，Firebug 将其解释为“函数 this.reportComment() 不是函数”。

我想我的问题与引用超出其适当范围的类函数有关，尽管我对为什么......或如何解决问题有点困惑。最终目标是实现 reportComment() 函数与 css 类的所有成员（每页最多 20 个）的单击绑定。困难在于，用“this.reportComment()”引用reportComment() 函数会导致错误，声称该函数不存在，而实际上它确实存在。

在 Stack Overflow 上查看类似的问题似乎没有回答这个问题......所以询问希望有人能给我指出正确的方向。

原文

Using Mootools 1.3.2

Code is as follows:

var DNReportAbuse = new Class({

Extends: DNUserDialog,
comment_id: null,
container: null,

initialize: function(classname) 
{
    var bindclass = $(document.body).getElements(classname);

    bindclass.each(function(el) {
        el.addEvents({
            click: function() {
                this.reportComment();
            }.bind(this)
        });
    });
},

reportComment: function() {
    this.preventDefault();
    alert('hello');
    return false;
}
});

The event does bind, and when "this.reportComment();" is replaced with "alert('hello world');" it works entirely ...

... but when "this.reportComment()" is used, I instead receive an error, which Firebug explains as "function this.reportComment() is not a function".

I imagine that my issue has something to do with referring to a class function outside of its proper scope, though I'm a bit confused as to why ... or how to solve the issue. The end goal is to achieve an on-click binding of the reportComment() function to all members of a css class (up to 20 per page). The difficulty is that referencing the reportComment() function with "this.reportComment()" results in an error claiming that the function does not exist, when it clearly does exist.

Looking through similar questions on Stack Overflow did not seem to answer this issue ... so asking in hopes that someone can point me in the right direction.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

错爱 2024-11-26 15:18:32

您在 bind 和 events 方面遇到一些问题：

initialize: function(classname) 
{
    var bindclass = $(document.body).getElements(classname);
    var _self = this; //var to store the 'real' this you will use
    bindclass.each(function(el) {
        el.addEvents({
            click: function(event) { //pass the event
                this.reportComment(event);
            }.bind(_self) //'this' is referring to the inner each function callback
        });
    });
},

reportComment: function(event) {
    event.preventDefault(); //preventDefault on the event, not on 'this'
    alert('hello');
    return false;
}

You have some problems with bind and events:

initialize: function(classname) 
{
    var bindclass = $(document.body).getElements(classname);
    var _self = this; //var to store the 'real' this you will use
    bindclass.each(function(el) {
        el.addEvents({
            click: function(event) { //pass the event
                this.reportComment(event);
            }.bind(_self) //'this' is referring to the inner each function callback
        });
    });
},

reportComment: function(event) {
    event.preventDefault(); //preventDefault on the event, not on 'this'
    alert('hello');
    return false;
}

回复收藏 0 原文

~没有更多了~