4

何が問題なのかはわかっていますが、なぜそれが起こっているのかよくわかりません。これがあるとします：

HTML:

<div><p>Hello</p><button>Fire</button></div>
<br/>
<button id="menu-button">Menu</button>

JavaScript:

function myObject(container, buttonElement) {
    this.container = container;
}

myObject.prototype.change = function () {
    var box = this.container;
    console.log(box);
    box.find('button').on('click', function() {
        console.log('firing');
        box.find('p').toggle();
    });

};

var obj1 = new myObject($('div'));
$('#menu-button').on('click', function(){
    obj1.change();
});​

フィドル: http://jsfiddle.net/L24As/1/

ご覧のとおり、[メニュー] ボタンをクリックしてobj1.change()起動すると、イベント ハンドラが [Fire] ボタンに追加され、すべてが期待どおりに機能します。ただし、[メニュー] ボタンをもう一度クリックすると、別のイベントが作成されるtoggle()ため、最初のイベントが非表示になり、2 番目のイベントが段落を表示するため、機能しません。何故ですか？イベントは上書きされるべきだと思っていたでしょう。

私はこのようにそれを解決しました：

http://jsfiddle.net/L24As/3/

function myObject(container) {
    this.container = container;
    this.change = function () {
        var box = this.container;
        console.log(box);
        box.find('button').on('click', function() {
            console.log('firing');
            box.find('p').toggle();
        });
    };
}

var obj1 = new myObject($('div'));
obj1.change();

それは良い解決策ですか? イベントは最初から「Fire」ボタンに付いているので、「メニュー」ボタンは他のものを表示するために使用され、同じタスクを実行しますが、少し異なります。

4

1 に答える 1

1

イベントは上書きされるべきだと思っていたでしょう。

いいえ、上書きされません。それらを追加してすべて起動しています（関数の背後にあるaddEventListeneronを参照してください）。

一度イベントを追加する必要があります。あなたの解決策は正しいです。

問題の本質は次のとおりです（コメントを参照）：

myObject.prototype.change = function () {
    var box = this.container;
    console.log(box);
    box.find('button').on(
        'click',

        // Here you create a new function object.
        // Each time you call the `change` method,
        // it will add another function object as an event handler.
        function () {
            console.log('firing');
            box.find('p').toggle();
        }
    );
};
于 2012-06-14T19:39:24.597 に答える