Доступ к виджету JQuery UI из функции обратного вызова Click

javascript jquery jquery-ui

83 просмотра

2 ответа

Мой виджет JQuery-UI должен добавлять к себе div при нажатии. Но у моего обратного вызова кнопки нет доступа this.element- он не определен, потому что я предполагаю, что он thisотносится к кнопке, а не к моему виджету. Пожалуйста, смотрите простой код ниже для лучшего описания:

(function ($) {

  $.widget( "my.myWidget", {

        _create: function () {

            this.element.click(this.addRow);
        },

        addRow: function(evt) {

            // this.element is undefined?
            console.log("Is this.element defined: " + this.element != undefined);

            // cant append to this.element
            $('<div></div>')
                .appendTo(this.element);
        }
    });
})(jQuery);

Как я могу получить доступ к виджету ( this.element) внутри моей функции обратного вызова click?

Автор: sazr Источник Размещён: 08.11.2019 11:15

Ответы (2)


2 плюса

Решение

Причина, по которой он не работает, заключается в том, что this.element.clickобратный вызов слушателя вызывается из другой области. Поэтому область видимости внутри addRowне является виджетом.

Есть два способа решения этой проблемы.

Вариант 1. Сохраняя thisпеременную, вы можете получить к ней доступ из другой области. Например:

(function ($) {
    $.widget( "my.myWidget", {

        _create: function () {
            var self = this;
            this.element.click(function() {
                self.addRow();
            });
        },

        addRow: function(evt) {

            // this.element is undefined?
            console.log("Is this.element defined: " + this.element != undefined);

            // cant append to this.element
            $('<div></div>')
                    .appendTo(this.element);
        }
    });
})(jQuery);

Вариант 2: привязав thisобласть видимости к this.addRowобъекту функции:

(function ($) {

    $.widget( "my.myWidget", {

        _create: function () {
            this.element.click(this.addRow.bind(this));
        },

        addRow: function(evt) {

            // this.element is undefined?
            console.log("Is this.element defined: " + this.element != undefined);

            // cant append to this.element
            $('<div></div>')
                    .appendTo(this.element);
        }
    });
})(jQuery);
Автор: Pieter Размещён: 20.08.2016 12:10

0 плюса

Вы должны объявить другой объект этого, чтобы использовать его в обратных вызовах:

var _this = this;

определите это в первой строке вашего класса виджетов.

Автор: mdameer Размещён: 20.08.2016 11:49
Вопросы из категории :
32x32