bxslider на динамически созданных элементах.
 

День добрый.

Столкнулся с такой проблемой:

Есть bxslider и разметка слайдера которая приходит из бд.
Вот код

$(document).ready(function(){
  $('a:not(a[href^=http],a.bx-prev,a.bx-next,a#dvigat,a[data-slide-index])').on('click', function(event){
              event.preventDefault();
               var href = $(this).attr('href');
                   $.ajax({
                   type: "POST",
                   url: "ajax.php",
                   data: 'page='+href,
                   dataType: "json",
                   success: function(data) { 
                      $('article.preview-news').hide().html(data.text).fadeIn(200);
                        $('title').html(data.title);
                              if(data.page == 'hostel'){
                             setTimeout(function(){										
                               $(".two_bxslider").bxSlider({
                                     speed: '300',
                                     auto: true,
                                     randomStart: true
                             });	
                                 $('.foto_box_hidden').hide();
                                   $('a.photo_view_hostel').click(function(event){
                                      event.preventDefault();
                                     $('.foto_box_hidden').toggle();
                                           });
                         ;},100);
                     }
		}//success
           })//ajax
      })//.on
})//ready

и код разметки

<div class="foto_box_hidden"><ul class="two_bxslider">
                                  <li><img src="img/zadv1.jpg" width="600" height="450" alt="img"></li>
                                  <li><img src="img/zadv2.jpg" width="600" height="450" alt="img"></li>
                                  <li><img src="img/zadv3.jpg" width="600" height="450" alt="img"></li>
                                  <li><img src="img/zadv4.jpg" width="600" height="450" alt="img"></li>
                                  <li><img src="img/zadv5.jpg" width="600" height="450" alt="img"></li></ul></div>

Проблема состоит в том что скрипт не всегда подцепляет данную разметку.

Т.е при желании развернуть блок и посмотреть на картиночки посетитель видит там такую картину:http://hostingkartinok.com/show-imag...da026ee2ea3056
Буду рад помощи.:yes:

И кстати при перезагрузке страницы слайдер начинает работать.

А вот без этого зверского селектора никак не обойтись? Попробуйте повесить обработчик на нужную вам ссылку, а не отсеивать ненужные.

На сайте около 30 ссылок на который вешается обработчик.
Мне кажется логичней отсеить 5 ненужных?

инициализацию bxslider надо производить на видимых обьектах

Так вы пишете плохо масштабируемый код. Вот решите вы добавить ссылку в футер, хедер или на страницу и на неё повесится обработчик, а чтобы этого не произошло, придётся ваш суперселектор дополнять. Лучше задайте класс всем нужным ссылкам и отсеивайте их. По поводу того, что при перезагрузке работать начинает: скорее всего браузер закешировал ответ сервера при первом запросе и теперь кеш отдаёт. Дебажьте обработчик success, скорее всего в нём проблема, лично мне таймаут не очень нравится, он действительно необходим?

Нет. просто проект делаю для себя и он очень небольшой.И мне заранее известно что единственные ссылки которые я буду добавлять на сайт-это гиперссылки.Ну и bxslider генерирует ссылки.
Потому и сделал такую выборку.все остальные ссылки имеют и будут иметь такой вид <a href="hostel"></a>.
НУ суть не в этом..

Таймаут я повесил из за "мыслев" о том что скрипт выполняется быстрей чем формируется ДОМ.
Знаю есть методы лучше.Ну это носило эксперементальный характер.:)
я его уже убрал.
И кстати слайдер Вообще перестал работать.Даже после перезагрузки.

Есть ещё одна особенность,при открытии фаербага - слайдер появляется.
Т.е он почему то реагирует на это событие.

$(document).ready(function(){
  $('a:not(a[href^=http],a.bx-prev,a.bx-next,a#dvigat,a[data-slide-index])').on('click', function(event){
              event.preventDefault();
               var href = $(this).attr('href');
                   $.ajax({
                   type: "POST",
                   url: "ajax.php",
                   data: 'page='+href,
                   dataType: "json",
                   success: function(data) { 
                      $('article.preview-news').hide().html(data.text).fadeIn(200, function(){
                                  $(".two_bxslider").bxSlider({
                                     speed: '300',
                                     auto: true,
                                     randomStart: true
                                    });	
                              });
                            $('title').html(data.title);
                              

                       if(data.page == 'hostel'){
                                 $('.foto_box_hidden').hide();
                                   $('a.photo_view_hostel').click(function(event){
                                      event.preventDefault();
                                     $('.foto_box_hidden').toggle();
                                           });
                        
                       }
		}//success
           })//ajax
      })//.on
})//ready

Привёл код к такому виду.
Но всё равно всё осталось на том же уровне.

А не может играть роли то что слайдер находиться в скрытом диве?:-?

Самое непонятное то что слайды идут.Слайдер функционирует.
Но не видно самих фотографий

:-?
у вашего слайдера размер ноль

apolon13,
блок делается на мгновение открытым -- ставится инициализация и тут же блок скрывается -- потом когда надо блок показывайте сладер будет в норме.