Экземпляр ссылочного объекта JQuery при привязке к динамически созданному элементу, т.е. к пользовательскому элементу управления - PullRequest
Новая
       4

Экземпляр ссылочного объекта JQuery при привязке к динамически созданному элементу, т.е. к пользовательскому элементу управления

0 голосов
/ 18 июля 2011

Я реализую «пользовательский элемент управления» на стороне клиента, но я пытаюсь получить ссылку на объект, который создал элемент управления в моих обработчиках событий.Лучше всего это объяснить с помощью небольшого кода; 

    function myControl(text) {
        this.Text = text;
        this.DoAlert = function (e) { alert(e.Text); };
        this.Create = function (container) {
            var btn = $('<BUTTON/>');
            btn.html('Click Me');

            container.append(btn);

            btn.bind('click', this, this.DoAlert);
        }
    }

    $(document).ready(function () {
        var control1 = new myControl('Button 1');
        control1.Create($('#container'));

        var control1 = new myControl('Button 2');
        control1.Create($('#container'));

    });

Как вы можете видеть, я создаю два экземпляра myControl, инициализированных различными строками, внутри DoAlert, как мне получить ссылку на объект, который создалкнопку, чтобы я мог получить ее свойства?

Это приемлемый подход для javascript / jquery или я должен делать что-то еще?

Заранее большое спасибо

1 Ответ

2 голосов
/ 18 июля 2011

У вас есть различные варианты:

1) Вы можете включить this в замыкание вокруг обработчика события: 

function MyControl() {
    var _this = this;
    this.DoAlert = function(e) { alert(_this.Text); };
    // ...
}

Переменная _this будет привязана к this дажевнутри функции DoAlert.

2) Вы используете $.proxy (ref http://api.jquery.com/jQuery.proxy/):

function MyControl() {
    // ...
        btn.bind('click', $.proxy(this.DoAlert, this));
    // ...
}

3) Используйте данные события правильно (ref: http://api.jquery.com/bind/)

function MyControl() {
    this.DoAlert = function(e) { alert(e.data.Text); }
    // ...
}

Я бы лично порекомендовал 2), поскольку он очень прозрачен (this в конструкторе совпадает с this в обработчике событий).

...