jQuery.unbind удаляет неправильный обработчик, созданный с использованием $ .proxy - PullRequest
Новая
       35

jQuery.unbind удаляет неправильный обработчик, созданный с использованием $ .proxy

2 голосов
/ 06 февраля 2012

У меня есть класс 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>

Таким образом, проблема в том, что когда unbind () метод объекта FIRST Control1 вызывается, он отвязывает ОБА documentClickedDelegate обработчики обоих объектов, если они созданный методом $. proxy () . Таким образом, система событий jquery считает, что эти обработчики одинаковы, несмотря на разные контексты, передаваемые методу $ .proxy ().

Если documentClickedDelegate обработчики создаются с Function.createDelegate - метод библиотеки MicrosoftAjax, все работает нормально. Хендлеры разные.

Оказалось, что $. Proxy создает идентичные функции прокси для различных передаваемых контекстов. С официального сайта:

"Однако следует помнить, что подсистема привязки событий jQuery назначает уникальный идентификатор для каждой функции обработки событий, чтобы отслеживать ее, когда она используется для указания функции, которая должна быть связана. Функция представленный jQuery.proxy () рассматривается как отдельная функция подсистема событий, даже если она используется для привязки к различным контекстам. к не отвязывайте неправильный обработчик, используйте уникальное пространство имен события для привязка и открепление (например, "click.myproxy1") вместо указания функция прокси во время открепления. «

Что в моем случае не следует делать, поскольку пространства имен разделяют события, специфичные для типа, а не для конкретного экземпляра.

Вот скриншоты, где вы можете видеть, что $. Proxy создает обработчики с идентичным GUID = 1 , а Function.createDelegate создает обработчики с РАЗНЫМ GIUD: guid = 1 и guid = 2 .

enter image description here

enter image description here

enter image description here

enter image description here

Таким образом, при удалении одного в первом случае он удаляет оба, что НЕ должно быть сделано!

Мой вопрос: есть ли в jquery аналог Function.createDelegate? Я не хочу использовать другую библиотеку MicrosoftAjax только для одной функции. Или, может быть, какое-то общее решение этой проблемы - как сказать jquery, что обработчики разные. Спасибо за ваши ответы.

1 Ответ

6 голосов
/ 06 февраля 2012

Вам необходимо указать пространство имен для событий.Простой пример: 

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.

...