Връзката в 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 accordion(), без да правя много допълнителна работа за себе си.

И така, като се има предвид примерният код по-долу, може ли някой да ми помогне да разбера какъв е проблемът тук или как да го преодолея?

<div class="accordion">
  <div class="head active"><a href="/bg#">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="/bg#">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, отвличащ събитието за щракване, освен предоставеното от вас   -  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, използвам id само защото вече бях тествал избора на която и да е връзка в div. Сигурен съм, че това ще работи дори по-добре от използването на конкретен идентификатор, защото мога да персонализирам функцията да работи за всяка връзка. Благодаря ви, че разгледахте въпроса ми! - person Lindsay Rose; 15.08.2012
comment
well ids са уникални за страницата, така че няма нужда да използвате селектор от типа 'class id'. И аз ви предложих да използвате селектора на котва, защото нямаше идентификатор във вашия HTML - person KoU_warch; 15.08.2012