2

我有 JavaScript 类：

<html>

<head>
    <script src="MicrosoftAjax.js" type="text/javascript"></script>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript">

var ClientControl = function () {
    //some instance-specific code here
};

ClientControl.prototype = {
    initialize: function () {
        this.documentClickedDelegate = $.proxy(this.documentClicked, this);
        //this.documentClickedDelegate = Function.createDelegate(this, this.documentClicked); // from MicrosoftAjax
    },

    bind: function() {
        $(document).bind("click", this.documentClickedDelegate);
    },

    unbind: function() {
        $(document).unbind("click", this.documentClickedDelegate);
    },

    documentClicked: function() {
        alert("document clicked!");
    }
};

var Control1 = new ClientControl();
Control1.initialize();
var Control2 = new ClientControl();
Control2.initialize();

Control1.bind();
Control2.bind();

Control1.unbind();
//Control2`s documentClickedDelegate handler, if created with $.proxy, already is unbound!

</script>
</body>
</html>

所以问题是，当调用FIRST Control1对象的unbind()方法时，它会取消绑定两个对象的两个documentClickedDelegate处理程序，如果它们是使用$.proxy()方法创建的。因此 jquery 事件系统认为这些处理程序是相同的，尽管传递给 $.proxy() 方法的上下文不同。

如果使用Function.createDelegate （MicrosoftAjax 库的方法）创建documentClickedDelegate处理程序，则一切正常。处理程序不同。

原来$.proxy为传递的不同上下文创建了相同的代理函数。来自官方网站：

“但是请注意，jQuery 的事件绑定子系统为每个事件处理函数分配一个唯一的 id，以便在它用于指定要取消绑定的函数时对其进行跟踪。由 jQuery.proxy() 表示的函数被视为事件子系统的单个函数，即使它用于绑定不同的上下文。为避免取消绑定错误的处理程序，请使用唯一的事件命名空间进行绑定和取消绑定（例如，“click.myproxy1”），而不是在取消绑定期间指定代理函数。”

在我的情况下不应该这样做，因为名称空间将特定于类型的事件分开，而不是特定于实例。

这是屏幕截图，您可以在其中看到$.proxy创建具有相同GUID = 1的处理程序，而Function.createDelegate创建具有不同 GIUD 的处理程序：guid = 1 和 guid = 2。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

因此，在第一种情况下删除一个时，它会同时删除两者，这是不应该的！

我的问题是：jquery 中是否有与 Function.createDelegate 类似的东西？我不想只为一个功能使用整个另一个 MicrosoftAjax 库。或者可能是这个问题的任何一般解决方案 - 如何告诉 jquery 处理程序不同。谢谢您的回答。

4

1 回答 1

6

您确实需要命名事件。简单的例子：

var counter = 0;

ClientControl.prototype = {
    initialize: function () {
        this.documentClickedDelegate = $.proxy(this.documentClicked, this);
        this.num = counter++;
    },
    bind: function() {
        $(document).bind("click.proxy" + this.num, this.documentClickedDelegate);
    },
    unbind: function() {
        $(document).unbind("click.proxy" + this.num, this.documentClickedDelegate);
    },
    documentClicked: function() {
        alert("document clicked!");
    }
}

这是一个工作版本。单击文档上的任意位置，您会收到一个警报。如果没有命名空间，你会得到 2。

于 2012-02-06T08:07:31.060 回答