в содержимом окна FancyBox не работает событие .click()
Создаю окно.
$(document).ready(function () { $("#modal_box").fancybox({ imageScale : false, overlayShow : true, // затемнять фон hideOnOverlayClick :false, // клик вне окна hideOnContentClick: false, // клик по окну centerOnScroll : false, titleShow: false // не выводить тайтл }); }); в него грузится ХТМЛ форма добавления юзера. Пример: <input type="text" id="user_name" style="width:300px"/> <input type="text" id="user_password" style="width:300px"/> <input type="text" id="start_date" name="start_date" style="width:300px"/> <input type="submit" value="Добавить" onClick="AddNewUser();" id="add_button"/> В этой форме к полю <input type="text" id="start_date" name="start_date" style="width:300px"/> привязан плагин .datepicker() : $(function() { var DateFormat = { nextText : "»", prevText : "«", currentText : "Today", monthNames : ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"], monthNamesShort : ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"], dayNames : ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"], dayNamesShort : ["Вос", "Пон", "Вто", "Сре", "Чет", "Пят", "Суб"], dayNamesMin : ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"], dateFormat : "dd/mm/yy", firstDay : 0, isRTL : false }; $("#start_date").datepicker(DateFormat); }); Событие .click() не работает, соответственно и модуль тоже. Иду дальше и для проверки я просто создаю событие .ckick() любой объект подгружаемый в модальное окно. На кнопку отправления данных в обработчик <input type="submit" value="Добавить" onClick="AddNewUser();" id="add_button"/> я вешаю событие $(document).ready(function (){ $("#modal_box").fancybox({ imageScale : false, overlayShow : true, // затемнять фон hideOnOverlayClick :false, // клик вне окна hideOnContentClick: false, // клик по окну centerOnScroll : false, titleShow: false // не выводить тайтл }); $("#add_button").click(function(){ alert('рабоает!'); }); }); и опять не работает. Возникает вопрос - почему? Данные не в iframe и, по идее, все должно быть нормально, но увы это не так. Может ли быть причина в том, что я склеиваю код JS из разных файлов? т.е. у меня несколько $(document).ready(function (){ ... }); |
Насколько мне известно, fancybox копирует указанный вами блок в свой контент, а значит что получается как бы создается новый элемент, а значит после открытия окна вам надо заново прописать обработчики.
У fancybox есть какое то событие которое указывает что окно загружено |
Событие называется вроде...
onComplete : function() { (...) } ... должно говорить что окно загружено и робота скрипта закончена. Но как компактно прописывать заново все обработчики? если их может быть куча... хм. |
$("#add_button").live('click', function(){
alert('работает!'); }); |
walik,
Работает! Спасибо. Выкладываю мой готовый вариант. $("#modal_box").fancybox({ imageScale : false, overlayShow : true, // затемнять фон hideOnOverlayClick :false, // клик вне окна hideOnContentClick: false, // клик по окну centerOnScroll : false, titleShow: false, // не выводить тайтл onComplete: function(){ var DateFormat = { nextText : "»", prevText : "«", currentText : "Today", monthNames : ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"], monthNamesShort : ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"], dayNames : ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"], dayNamesShort : ["Вос", "Пон", "Вто", "Сре", "Чет", "Пят", "Суб"], dayNamesMin : ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"], dateFormat : "dd/mm/yy", firstDay : 0, isRTL : false /*closeText : "Done", prevText : "Prev", nextText : "Next", currentText : "Today", monthNames : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthNamesShort : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], dayNames : ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], dayNamesShort : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], dayNamesMin : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], dateFormat : "mm/dd/yy", firstDay : 0, isRTL : false*/ }; $("#dob").datepicker(DateFormat); $("#start_date").datepicker(DateFormat); $("#fire_date").datepicker(DateFormat); } }); |
Часовой пояс GMT +3, время: 16:11. |