Селекторы jQuery: захват ссылок

0

Я думаю, что у меня проблема с моим селектором. У меня есть вращающаяся карусель и хочу, чтобы захватить все a щелчки внутри li (каждый li содержит интерактивное фоновое изображение и ссылку).

Я уверен, что мой селектор корректен до li так как я могу заменить событие a и .click на .hide() и он скрывает 2-е изображение (li) правильно. Как исправить мой селектор capature все a ссылку?

jQuery('#flexgrid .columns div ul#rotator-slides.slides li:eq(1) a').click(function(event){    
  event.preventDefault();  
  alert('got it'); 
});

Спасибо (Edit: Добавлен код 1st li only, следующие 4 следуют в том же формате, если это помогает)

<div id="flexgrid">
  <div class="columns"> 
    <div class="flexslider col-reset" id="standard-rotator" data-slide-speed="9500" data-animation-speed="900">
      <ul class="slides" id="rotator-slides">
        <li class="rotator-slide item" data-slide="1">
          <div class="mboxDefault">
            <div class="text-block">
              <div class="hero-content" style="left: 10px; top: 70px;">
                <div class="position-content">
                  <div class="button-bottom" style="width: 360px;">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </em></p>
                  </div>
                  <a href="storefront.html" target="_self" class="button">Find Out More </a> </div>
              </div>
            </div>
            <a href="storefront.html" target="_self" class="hero-image" style="background-image:url(/images/hero1.jpg);"></a> 
          </div>
          <script>mboxCreate('carousel-slide-1');</script> 
        </li>
      </ul>
    </div>
  </div>
</div>
  • 2
    Не могу сказать без HTML - пост Zeh источник! Кроме того, вы можете сократить этот селектор, чтобы он начинался с элемента с идентификатором, поскольку все ваши идентификаторы должны быть уникальными.
  • 0
    Итак, вы хотите захватить все a пределах li ?
Показать ещё 1 комментарий
Теги:
jquery-selectors

1 ответ

0
Лучший ответ

Если элементы генерируются карусельным плагином, вам нужно использовать функцию jQuery "live": https://api.jquery.com/live/

$( "#flexgrid .columns div ul#rotator-slides.slides li:eq(1) a" ).live( "click", function(event) {
    event.preventDefault();  
    alert('got it'); 
  });
});

//edit: Начиная с jQuery 1.7, метод.live() устарел. Используйте.on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать.delegate() в предпочтении.live(). Так должно быть:

$(function() {
  $( "#flexgrid ul#rotator-slides li:eq(0)" ).on( "click", "a", function(event) {
    event.preventDefault();  
    alert('got it'); 
  });
});
  • 0
    The Cutter, я просто хотел отметить, что в прямом эфире устарела, так что спасибо за редактирование. К сожалению, это не работает. Предупреждение не сработало, и ссылка выполняется.
  • 0
    Хорошо, обычно это должно работать с live / on. Было бы проще иметь HTML-код ...
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню