Создайте экземпляр jQuery ui с изменяемым размером, используя селектор, добавленный в DOM с помощью jQuery - PullRequest
Новая
       32

Создайте экземпляр jQuery ui с изменяемым размером, используя селектор, добавленный в DOM с помощью jQuery

0 голосов
/ 03 ноября 2011

Я пытаюсь запустить экземпляр jizery ui с изменяемыми размерами, но использую селектор, добавленный в DOM самим jquery. Это базовый пример моего скрипта:

HTML: 

<div class='lyr'></div>

JQuery: 

// Add class
$('lyr').addClass('fixed');

// Resizable
$('.fixed').resizable({
    aspectRatio: true,
    handles: 'all'
});

Я думал о том, чтобы использовать что-то вроде live () или bind (), но у меня нет событий для привязки. Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 03 ноября 2011

В прошлом я использовал плагин LiveQuery - http://brandonaaron.net/code/livequery/docs, чтобы иметь возможность нацеливать элементы, добавленные в dom, как в вашем случае.

1 голос
/ 03 ноября 2011

Если я правильно понял, вы хотите, чтобы что-нибудь на странице с классом «fixed» можно было изменять в размере, даже если класс добавляется после загрузки страницы? Вы правы, что жить, связывать и делегировать здесь не поможет.

Я могу думать о двух возможностях, ни о одной прекрасной.

Сначала настройте событие «mouseenter», которое будет изменять размер элемента, если это не было ранее: 

$(body).delegate(".fixed", "mouseenter", function(ev) {
    var target = $(ev.target);
    if (target.data("resizable")) return;
    target.resizable({
        aspectRatio: true,
        handles: 'all'
    });
})

Это позволяет нам решить проблему отсутствия события, к которому можно привязаться.

В качестве альтернативы, вы можете установить monkeypatch jQuery.fn.addClass: 

var classRe = new RegExp(c + className + \b);
._addClass = jQuery.fn.addClass;
jQuery.fn.addClass = function(className) {
    if (classRe.test(classname)) {
        if (this.data("resizable")) return;
        this.resizable({
            aspectRatio: true,
            handles: 'all'
        });
    }
    jQuery.fn._addClass.apply(this, arguments);
}

Конечно, это будет работать только в том случае, если класс добавляется с помощью метода addClass.

Также в вашем примере, 

$('lyr').addClass('fixed');

Вероятно, должно быть: 

$('.lyr').addClass('fixed');
...