Question

像这样的代码

    var test = function (e,name) {
        this.e = e;
        this.name = name;
        this.init();
    };
    test.prototype.init = function () {
        var $e = $(this.e);
        var _this = this;
        $e.click(function () {
            alert(_this.name);
            //show the current name
        });
        $('#AA').click(function () {
            alert(_this.name);
            //show all the name
        })
    };
    new test($("#A"),"A");
    new test($("#B"),"B");

为什么点击“$ e”只显示当前名称，点击“$（'＃AA'）”显示所有名称 jsfiddle
谢谢！

Answer 1

这是因为您调用：

    $('#AA').click(function () {
        alert(_this.name);
        //show all the name
    })

#A和#B。

当您致电：new test($("#A"),"A");时，会调用方法init，这会导致点击回调的附件，因此当您点击#AA A时会收到提醒。< / p>

之后，您致电：new test($("#B"),"B");。这会导致init调用不同的值。还有一个点击处理程序附加到#AA，因此当您点击该元素时，您会收到两个警报。

Answer 2

因为#AA的点击处理程序已附加两次。

new test($("#A"),"A");
new test($("#B"),"B");

您致电test构造函数两次，一次针对#A，一次针对#B。 init被调用两次，所以

$('#AA').click(function () {
    alert(_this.name);
    //show all the name
})

也将运行两次。

在高级事件处理模型（addEventListener中，jQuery当然也使用它）事件处理程序不会互相替换（比如旧的onclick和朋友），但是它们相加而不是。因此，如果向元素添加相同的事件处理程序5次，则在事件触发时将运行5次。

Answer 3

@kapa和@Minko是正确的。

一个快速的解决方案是使用unbind()来避免处理程序被添加两次：

        $('#AA').unbind("click").click(function () {
            alert(_this.name);
            //show all the name
        })

unbind()会删除之前添加的点击处理程序。所以我们确保它被添加一次。

编辑：在严肃的应用程序中，使用off()代替unbind()。请参阅off here的文档。

关于jquery对象中的“this”

3 个答案: