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

jQuery を使用している場合は、次のようにコードをマークアップ (古い懸念事項の分離) から分離できます。

$(document).ready(function() {

  var box = new BigBox();

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

});

ボックスの ID を持つすべての div に対して、クリック ハンドラーを 1 回追加するだけで済みます。クリックは無名関数であるため、クリックが配置されている関数のスコープを取得し、ボックス インスタンスにアクセスします。

于 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 第 5 版の機能です)。

    div.click(this.OnClick.bind(this));
于 2010-04-22T21:34:47.543 に答える
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);
}

EDIT（「パラメーターの受け渡し方法」に応じて）;

どのパラメーターを渡したいのかわかりませんが、..

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 に答える