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()不起作用，因为第一个事件被隐藏而第二个事件正在显示段落。这是为什么？我原以为该事件应该被覆盖。

我是这样解决的：

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”按钮上，因此“Menu”按钮用于显示其他内容，这使得它们有点不同，尽管它们执行相同的任务。

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 回答