Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2015, 10:16
Аватар для apolon13
Интересующийся
Отправить личное сообщение для apolon13 Посмотреть профиль Найти все сообщения от apolon13
 
Регистрация: 24.04.2015
Сообщений: 28

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
Буду рад помощи.

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

Последний раз редактировалось apolon13, 18.05.2015 в 11:47.
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2015, 12:04
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Сообщение от apolon13
$('a:not(a[href^=http],a.bx-prev,a.bx-next,a#dvigat,a[data-slide-index])')
А вот без этого зверского селектора никак не обойтись? Попробуйте повесить обработчик на нужную вам ссылку, а не отсеивать ненужные.
Ответить с цитированием
  #3 (permalink)  
Старый 18.05.2015, 12:35
Аватар для apolon13
Интересующийся
Отправить личное сообщение для apolon13 Посмотреть профиль Найти все сообщения от apolon13
 
Регистрация: 24.04.2015
Сообщений: 28

На сайте около 30 ссылок на который вешается обработчик.
Мне кажется логичней отсеить 5 ненужных?
Ответить с цитированием
  #4 (permalink)  
Старый 18.05.2015, 13:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от apolon13
Проблема состоит в том что скрипт не всегда подцепляет данную разметку.
инициализацию bxslider
Сообщение от apolon13
$('article.preview-news').hide().html(data.text).fadeIn(200 здесь);
надо производить на видимых обьектах
Ответить с цитированием
  #5 (permalink)  
Старый 18.05.2015, 13:18
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Сообщение от apolon13 Посмотреть сообщение
На сайте около 30 ссылок на который вешается обработчик.
Мне кажется логичней отсеить 5 ненужных?
Так вы пишете плохо масштабируемый код. Вот решите вы добавить ссылку в футер, хедер или на страницу и на неё повесится обработчик, а чтобы этого не произошло, придётся ваш суперселектор дополнять. Лучше задайте класс всем нужным ссылкам и отсеивайте их. По поводу того, что при перезагрузке работать начинает: скорее всего браузер закешировал ответ сервера при первом запросе и теперь кеш отдаёт. Дебажьте обработчик success, скорее всего в нём проблема, лично мне таймаут не очень нравится, он действительно необходим?
Ответить с цитированием
  #6 (permalink)  
Старый 18.05.2015, 13:39
Аватар для apolon13
Интересующийся
Отправить личное сообщение для apolon13 Посмотреть профиль Найти все сообщения от apolon13
 
Регистрация: 24.04.2015
Сообщений: 28

Цитата:
Так вы пишете плохо масштабируемый код. Вот решите вы добавить ссылку в футер, хедер или на страницу и на неё повесится обработчик, а чтобы этого не произошло, придётся ваш суперселектор дополнять. Лучше задайте класс всем нужным ссылкам и отсеивайте их.
Нет. просто проект делаю для себя и он очень небольшой.И мне заранее известно что единственные ссылки которые я буду добавлять на сайт-это гиперссылки.Ну и bxslider генерирует ссылки.
Потому и сделал такую выборку.все остальные ссылки имеют и будут иметь такой вид <a href="hostel"></a>.
НУ суть не в этом..

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

Есть ещё одна особенность,при открытии фаербага - слайдер появляется.
Т.е он почему то реагирует на это событие.
Ответить с цитированием
  #7 (permalink)  
Старый 18.05.2015, 13:45
Аватар для apolon13
Интересующийся
Отправить личное сообщение для apolon13 Посмотреть профиль Найти все сообщения от apolon13
 
Регистрация: 24.04.2015
Сообщений: 28

$(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


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

А не может играть роли то что слайдер находиться в скрытом диве?
Ответить с цитированием
  #8 (permalink)  
Старый 18.05.2015, 13:47
Аватар для apolon13
Интересующийся
Отправить личное сообщение для apolon13 Посмотреть профиль Найти все сообщения от apolon13
 
Регистрация: 24.04.2015
Сообщений: 28

Самое непонятное то что слайды идут.Слайдер функционирует.
Но не видно самих фотографий
Ответить с цитированием
  #9 (permalink)  
Старый 18.05.2015, 13:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от apolon13
А не может играть роли то что слайдер находиться в скрытом диве?
Сообщение от рони
инициализацию bxslider
Сообщение от рони
надо производить на видимых обьектах

Сообщение от apolon13
Но не видно самих фотографий
у вашего слайдера размер ноль
Ответить с цитированием
  #10 (permalink)  
Старый 18.05.2015, 14:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка событий на динамически созданных объектах Alexey_R jQuery 28 15.02.2017 15:28
Autocomplete в динамически созданной форме Nobas Events/DOM/Window 7 24.03.2014 15:05
jCart. Не работает ajax для динамически созданных товаров. Whitetown jQuery 2 09.03.2012 08:31
Не работают события в подгруженых динамически элементах vipka jQuery 11 31.01.2010 02:44
Обработка ДИНАМИЧЕСКИ созданных checkbox Tankiro1 Общие вопросы Javascript 1 04.07.2009 02:56