Ссылка внутри div не активна, когда Jquery hide() и show() используются для содержащего div

У меня проблема со ссылкой, которая находится внутри div на моей странице. В настоящее время при переходе по ссылке ничего не происходит. Я не понимаю почему, но я думаю, что это связано с использованием hide() и show() в содержащем div, что я объясню ниже.

Div является частью пользовательского «аккордеона», который использует следующий Jquery для открытия/закрытия правильного div при щелчке заголовка:

   $('.accordion .head').click(function () {
     $('.accordion .head').next().hide();
     $('.accordion .head').removeClass("active");

     $(this).next().show('fast');
     $(this).addClass("active");
     return false;
});

Я понимаю, что есть лучшие способы добиться поведения «аккордеона», но, поскольку это используется на нашем веб-сайте, у меня нет возможности обновить аккордеон, чтобы использовать фактический метод JQuery аккордеона (), не делая много дополнительной работы для сам.

Итак, учитывая приведенный ниже пример кода, может ли кто-нибудь помочь мне понять, в чем проблема или как ее преодолеть?

<div class="accordion">
  <div class="head active"><a href="#">Heading 1</a></div>
  <div class="accordion-content first">
      <p>
           Some text here
      </p>
      <div class="accordion-logos"> 
      </div>
  </div>            
  <div class="head"><a href="#">Heading 2</a></div>
  <div class="accordion-content">
      <p>
          Some other text here 
      </p>
      <p>
          <a href="http://www.google.com">http://www.google.com</a>                                    
      </p>
  </div>            
</div>

Я даже не могу зарегистрировать щелчок, когда обрабатываю его конкретно, предупреждение в приведенном ниже коде никогда не срабатывает при нажатии на ссылку:

  $('.accordion .accordion-content #thelink').click(function () {
    alert();
  });

Благодарю вас,

Роза


person Lindsay Rose    schedule 15.08.2012    source источник
comment
этот пример JSfiddle с предоставленным вами кодом не блокирует активацию ссылки Google, что приводит меня к считаю, что должен быть какой-то другой Javascript, перехватывающий событие click, чем вы предоставили   -  person Simon West    schedule 15.08.2012
comment
Привет Саймон, Спасибо за вашу помощь с этим. Я просмотрел пример JSfiddle и вижу, что вы правы, ссылка должна работать, если этому не препятствует какой-либо другой javascript. Мне придется отключать один скрипт за раз, пока я не выясню причину здесь. Спасибо, что нашли время, чтобы посмотреть на это!   -  person Lindsay Rose    schedule 15.08.2012
comment
@LRose: я отредактировал свой ответ, теперь, когда я правильно понял проблему, с несколькими предложениями о том, как определить, что может быть не так.   -  person Nope    schedule 15.08.2012


Ответы (3)


Кажется, я неправильно вас понял в первый раз.

Если ссылка google не срабатывает, значит, что-то блокирует ссылки, перезаписывает href ссылок или, возможно, перед ней находится другой элемент, и вы не можете щелкнуть ссылку.

Если кто-то хотел заблокировать ссылку на работу, он мог сделать что-то вроде этого:

$('.accordion .accordion-content a').click(function(){
    return false;
});

Если вы хотите проверить, так ли это, вы можете попробовать отвязать все и проверить, можете ли вы щелкнуть ссылку, а затем:

$('.accordion .accordion-content a').unbind('click');

Также проверьте свой вывод html, чтобы увидеть, какое значение установлено для href, возможно, кто-то перезаписал его.

Просто перейдите на отображаемую страницу, щелкните правой кнопкой мыши и выберите источник просмотра. Найдите ссылку Google и проверьте значение href.

person Nope    schedule 15.08.2012
comment
Привет, Франсуа. Вы правы. Перед публикацией я случайно удалил идентификатор ссылки. Я попробовал оба варианта, которые вы предоставили, и хотя он явно должен работать на основе предоставленной вами демонстрации, я все еще не получаю предупреждение на реальной странице. Я действительно начинаю думать, что здесь проблемы вызывает другой скрипт на странице. Большое спасибо за обзор этого! - person Lindsay Rose; 15.08.2012
comment
@LRose: я обновил свой ответ сейчас. Я изначально неправильно понял вашу проблему. Я добавил несколько советов о том, как помочь вам решить, почему ссылка не позволяет вам щелкнуть по ней. Я предполагаю, что мы говорим о том, что вы не можете запустить ссылку Google :) - person Nope; 15.08.2012
comment
Привет, Франсуа, еще раз спасибо за вашу помощь, это так загадочно! Я попробовал второй фрагмент, который вы предоставили, но ссылка по-прежнему не активна, я также просмотрел отображаемое содержимое страницы, и значение href заполнено. Я думаю, что у вас может быть что-то, если вы упомянули, что другой элемент на странице может блокировать переход по ссылке. Мне придется копаться в css для всех элементов на странице, чтобы увидеть, есть ли что-то, что может это сделать. Еще раз спасибо за вашу помощь! - person Lindsay Rose; 15.08.2012

У меня была проблема с неактивными ссылками, и я наткнулся на этот пост, чтобы попытаться найти ответ. Проблема заключалась в том, что после того, как jquery hide() был запущен для элемента div под моим заголовком, ссылки в моем заголовке не были доступны для кликов. Я изменил свой код на slideUp() вместо hide(), и ссылки стали кликабельными. Я не уверен, решает ли это ваш вопрос, указанный в этом посте, но, видя, что он связан, я подумал, что поделюсь им, поскольку он может помочь любому, кто наткнется на этот пост. Это не так удобно, как .hide(), но годный обходной путь.

$('#mydiv').slideUp();
person Sarah    schedule 11.06.2014

Почему вы используете #thelink? если я просто заменю его на a, он сработает.

$(function(){
   $('.accordion .head').click(function () {
    $('.accordion .head').next().hide();
    $('.accordion .head').removeClass("active");

    $(this).next().show('fast');
    $(this).addClass("active");
    return false;
  });

  $('.accordion .accordion-content a').click(function () {
   alert();
  });
})

person KoU_warch    schedule 15.08.2012
comment
Привет, EH_warch, я использую идентификатор только потому, что уже проверил выбор любой ссылки в div. Я уверен, что это будет работать даже лучше, чем использование определенного идентификатора, потому что я могу настроить функцию для работы с любой ссылкой. Спасибо за рассмотрение моего вопроса! - person Lindsay Rose; 15.08.2012
comment
ну идентификаторы уникальны для страницы, поэтому вам не нужно использовать селектор типа «идентификатор класса». И я предложил вам использовать селектор привязки, потому что в вашем HTML не было идентификатора. - person KoU_warch; 15.08.2012