Как заставить все кнопки (даже динамически созданные) в приложении следовать виджету кнопок jquery, не вызывая.button() несколько раз
Я новичок в переполнении стека, и это мой первый вопрос. Простите меня за любые ошибки. Этот вопрос более общий, но я попытался найти ответ, но не смог его найти.
Скажем, у меня есть страница, и я использую виджет кнопки jquery ui для всех кнопок. Что происходит, у меня есть определенный класс, определенный для всех кнопок на моей странице. Так что я могу просто указать $('. MyButtonClass'). Button(); но всякий раз, когда я отрисовываю частичные виды, у которых снова есть кнопка, я должен делать то же самое в частичных видах. Есть ли способ, которым я могу глобально указать переход для кнопки или любой элемент в этом отношении.
Вот образец Fiddle, который добавляет кнопки при нажатии. Но добавленные кнопки не являются переходами в качестве виджетов кнопок (я не хочу использовать клон).
$('.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();
});
Если вы инициируете свое событие и слушаете его, то вы можете делать все, что захотите. Я мог бы добавить туда возможность добавлять больше кнопок, но это должно помочь.
То, о чем вы просите, какое-нибудь событие, когда кнопка добавлена .... вам нужно придумать это самостоятельно и вызвать ее при добавлении кнопки. Существует следующее: Как обнаружить создание нового элемента в jQuery? который говорит о конкретном событии, которое срабатывает при добавлении новых элементов в DOM. Не проверял его, и похоже, что он может не работать в IE.
Я не большой поклонник этого, но вы могли бы опросить новые кнопки. Проверьте мою вилку вашей скрипки (это звучит смешно):
http://jsfiddle.net/lbstr/Hq97H/
Используя ваш пример, это будет выглядеть так:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
Как я уже сказал, я не большой поклонник этого. Я понимаю желание чего-то вроде $.live
здесь, но я все еще думаю, что лучше инициализировать ваш новый контент, когда вы добавляете его. Если вы делаете вызов ajax для нового контента, просто инициализируйте его, когда добавляете в DOM.
Мой глупый код опроса и $.live
(что сейчас устарело) может быть удобно, но они работают ужасно. Просто мои два цента. Вы знаете свой код лучше, чем я!