Как заставить все кнопки (даже динамически созданные) в приложении следовать виджету кнопок jquery, не вызывая.button() несколько раз

Я новичок в переполнении стека, и это мой первый вопрос. Простите меня за любые ошибки. Этот вопрос более общий, но я попытался найти ответ, но не смог его найти.

Скажем, у меня есть страница, и я использую виджет кнопки jquery ui для всех кнопок. Что происходит, у меня есть определенный класс, определенный для всех кнопок на моей странице. Так что я могу просто указать $('. MyButtonClass'). Button(); но всякий раз, когда я отрисовываю частичные виды, у которых снова есть кнопка, я должен делать то же самое в частичных видах. Есть ли способ, которым я могу глобально указать переход для кнопки или любой элемент в этом отношении.

Вот образец Fiddle, который добавляет кнопки при нажатии. Но добавленные кнопки не являются переходами в качестве виджетов кнопок (я не хочу использовать клон).

http://jsfiddle.net/wjxn8/

$('.clsTest').button().click(function(){
    $(this).after('<input type="button" value="Added" class="clsTest"/>');
});

Это возможно без:- 1) Добавление классов CSS для виджета кнопки вручную для всех созданных кнопок. 2) Отслеживание изменений DOM с использованием Javascript и выполнение переходов для всех элементов кнопки.

Спасибо за вашу помощь!!!

2 ответа

Решение

Так как вы искали что-то еще, почему бы не вызвать пользовательское событие при загрузке партиалов или чего-либо еще:

$('.clsTest').button().click(function(){
    $(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
    $('.clsTest').button();
});

http://jsfiddle.net/wJXN8/3/

Если вы инициируете свое событие и слушаете его, то вы можете делать все, что захотите. Я мог бы добавить туда возможность добавлять больше кнопок, но это должно помочь.

То, о чем вы просите, какое-нибудь событие, когда кнопка добавлена ​​.... вам нужно придумать это самостоятельно и вызвать ее при добавлении кнопки. Существует следующее: Как обнаружить создание нового элемента в jQuery? который говорит о конкретном событии, которое срабатывает при добавлении новых элементов в DOM. Не проверял его, и похоже, что он может не работать в IE.

Я не большой поклонник этого, но вы могли бы опросить новые кнопки. Проверьте мою вилку вашей скрипки (это звучит смешно):

http://jsfiddle.net/lbstr/Hq97H/

Используя ваш пример, это будет выглядеть так:

setInterval(function(){
    $('.clsTest').not('.ui-button').button();
}, 1000);

Как я уже сказал, я не большой поклонник этого. Я понимаю желание чего-то вроде $.live здесь, но я все еще думаю, что лучше инициализировать ваш новый контент, когда вы добавляете его. Если вы делаете вызов ajax для нового контента, просто инициализируйте его, когда добавляете в DOM.

Мой глупый код опроса и $.live (что сейчас устарело) может быть удобно, но они работают ужасно. Просто мои два цента. Вы знаете свой код лучше, чем я!

Другие вопросы по тегам