javascriptjqueryjquery-eventsmicrosoft-ajax

jQuery.unbind deletes wrong handler created using $.proxy

I have JavaScript class:

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

So the problem is, when unbind() method of FIRST Control1 object is called, it unbinds BOTH documentClickedDelegate handlers of both objects, if they are created with $.proxy() method. So jquery event system thinks that these handlers are same, despite different contexts passed to $.proxy() method.

If documentClickedDelegate handlers are created with Function.createDelegate - MicrosoftAjax Library`s method, everything workds fine. Handlers are different.

Turned out that $.proxy creates identical proxy functions for different contexts passed. From official site:

"Be aware, however, that jQuery's event binding subsystem assigns a unique id to each event handling function in order to track it when it is used to specify the function to be unbound. The function represented by jQuery.proxy() is seen as a single function by the event subsystem, even when it is used to bind different contexts. To avoid unbinding the wrong handler, use a unique event namespace for binding and unbinding (e.g., "click.myproxy1") rather than specifying the proxied function during unbinding. "

Which in my case shoudn`t be done, because namespaces separate type-specific events, not instance-specific.

Here are screenshots, where you can see, that $.proxy creates handlers with identical GUID = 1, and Function.createDelegate creates handlers with DIFFERENT GIUDs: guid = 1 and guid = 2.

enter image description here

enter image description here

enter image description here

enter image description here

So when deleting one in first case, it deledes both, which should NOT be done!

My question is: is there any analog in jquery to Function.createDelegate? I don`t want to use whole another MicrosoftAjax library for only one feature. Or maybe any general solution to this problem - how to tell jquery that handlers are different. Thank you for your answers.

Solution

  • You do need to namespace the events. Simple example:

    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!");
    }
}

    Here's a working version. Click anywhere on the document and you get one alert. Without the namespacing you get 2.