简单的 Mootools 到 jQuery 转换 - 事件处理程序

Question

我正在将 MooTools 插件移植到 jQuery，但在我陷入一小部分之前从未使用过 MooTools，我希望有人可以提供帮助。

MooTools：

var bt = new Element('a',{
    "title" : label,
    "text"  : label,
    "class" : classe,
    "events": {
        click: (clickEvent || this.hide).bind(this)
    }
});

this.buttons.push(btn);
return btn;

到目前为止我的 jQuery：

var btn = $('a').attr({
    "title" : label,
    "text"  : label,
    "class"  : cssClass
});

btn.click(function() {

});

我只是不确定如何从 MooTools 转换点击处理程序行...？

编辑：这是完整的功能：

addButton : function(label, cssClass, clickEvent) {

    // jQuery code
    var btn = $('<a></a>').attr({
        "title" : label,
        "text"  : label,
        "class"  : cssClass
    });

    btn.click(function() {

    });

    // Mootools code
    var bt = new Element('a',{
        "title" : label,
        "text"  : label,
        "class" : classe,
        "events": {
            click: (clickEvent || this.hide).bind(this)
        }
    });

    this.buttons.push(btn);
    return btn;
},

它是模态窗口插件的一部分，因此添加这一点它会检查要添加的按钮。如果回调函数被传递，那么它将对其起作用，如果没有，那么它将隐藏模态窗口...我认为...

注意：只是指出我还稍微改变了jQuery 版本中的参数和变量名称。这不是一个错字。

Answer 1

试试这个：

var btn = $('<a></a>').attr({
    "title" : label,
    "text"  : label,
    "class" : cssClass
}).click(function(e) {
    //Click event logic (I think you're trying to hide it)
    e.preventDefault();
    $(this).hide();
});

或者，你可以这样写：

var btn = $('<a></a>').attr({
    "title" : label,
    "text"  : label,
    "class" : cssClass
    "click" : function(e){
                e.preventDefault();
                $(this).hide();
    });
});

或者，像这样：

var btn = $('<a></a>').attr('title', label)
                      .attr('text', label)
                      .attr('class', cssClass)
                      .click(function(e) {
                                             e.preventDefault();
                                             $(this).hide();
                                         });

Answer 2

这部分需要重写。 mootools插件实际上是在创建一个新的锚点；您拥有的代码将选择页面上的所有锚点并将属性应用于它们（实际上它可能只会影响第一个选定的锚点，但仍然是一个问题）。

var btn = $('a').attr({
    "title" : label,
    "text"  : label,
    "class  : cssClass
});

它不能回答你的问题，但这是你需要知道的事情。

Answer 3

addButton : function(label, cssClass, clickEvent){
var btn = $('<a>');

btn.attr({
"title" : label,
"text"  : label,
"class"  : cssClass
}).click( $.proxy( ( clickEvent || this.hide ), this )  );

this.buttons.push( btn );
return btn;
}

注意：

$.proxy( fn, context ) 在功能上等同于 fn.bind( context )

使用 .click(fn) 更好> 比 attr("click", fn) 因为前者得到
jQuery 跨浏览器事件修复。