1

注意：本题使用 jQuery ，但本题与 jQuery 无关！

好的，所以我有这个对象：

var box = new BigBox();

这个对象有一个名为的方法Serialize()：

box.AddToPage();

这是方法AddToPage()：

function AddToPage()
{
    $('#some_item').html("<div id='box' onclick='this.OnClick()'></div>");
}

上面的问题是this.OnClick()（显然不起作用）。我需要onclick处理程序来调用BigBox该类的成员。我怎样才能做到这一点？

对象如何在事件处理程序中引用自己？

4

4 回答 4

4

您应该使用 jQuery 附加处理程序：

function AddToPage()
{
    var self = this;
    $('#some_item').empty().append(
        $("<div id='box'></div>")
            .click(function() { self.OnClick(someParameter); })
    );
}

为了强制在对象的上下文中调用事件处理程序（并传递参数），您需要添加一个正确调用处理程序的匿名函数。否则，this处理程序中的关键字将引用 DOM 元素。

于 2010-04-22T21:29:39.080 回答
1

不要使用内联代码添加事件处理程序。

function AddToPage()
{
    $('#some_item').html("<div id='box'></div>");
    $('#box').click(this.OnClick);
}

编辑：

另一种方式（避免额外的选择）：

function AddToPage()
{
    var div = $('<div id="box"></div>'); // probably don't need ID anymore..
    div.click(this.OnClick);

    $('#some_item').append(div);
}

编辑（响应“如何传递参数”）；

我不确定你想传递什么参数，但是..

function AddToPage()
{
    var self = this, div = $('<div></div>');
    div.click(function (eventObj) {
        self.OnClick(eventObj, your, params, here);
    });

    $('#some_item').append(div);
}
于 2010-04-22T21:25:12.423 回答
1

如果您使用的是 jQuery，那么您可以像这样将代码与标记（旧的关注点分离）分开

$(document).ready(function() {

  var box = new BigBox();

  $('#box').click(function() {
    box.serialize();
  });

});

您只需为所有 id 为 box 的 div 添加一次点击处理程序。并且因为点击是一个匿名函数，所以它获取了它所在的函数的范围，因此可以访问盒子实例。

于 2010-04-22T21:29:00.267 回答
1

在 jQuery 1.4 中，您可以使用代理。

BigBox.prototype.AddToPage= function () {
    var div= $('<div>', {id: box});
    div.click(jQuery.proxy(this, 'OnClick');
    div.appendTo('#some_item');
}

您还可以使用手动关闭：

    var that= this;
    div.click(function(event) { that.OnClick(event); });

或者，最简单的是，但需要一些帮助才能在尚不支持它的浏览器中实现（这是 ECMAScript 第五版功能）：

    div.click(this.OnClick.bind(this));
于 2010-04-22T21:34:47.543 回答