jQuery wyłącza link


284

Czy ktoś wie, jak wyłączyć link w jquery BEZ korzystania return false;?

W szczególności staram się wyłączyć link elementu, wykonując kliknięcie go za pomocą jquery, która uruchamia niektóre rzeczy, a następnie ponownie włączając ten link, aby po ponownym kliknięciu działał jako domyślny.

Dzięki. Dave

AKTUALIZACJA Oto kod. Po zastosowaniu .expandedklasy należy ponownie włączyć wyłączony link.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

7
Dlaczego wymóg nieużywania return false? Użyj go, a następnie usuń moduł obsługi zdarzeń, gdy już nie ma zastosowania (lub umieść w nim warunek, aby zwrócić różne wartości w zależności od statusu wspomnianych „niektórych rzeczy”).
Quentin,

Czy po prostu próbujesz wykonać wstępne przetwarzanie przed kliknięciem linku przy tej samej akcji kliknięcia? tzn. nie proponujesz dwóch kliknięć, ale link do kliknięcia użytkownika, niektóre działania się zdarzają, link jest śledzony?
Lazarus

W przeciwnym razie, czy możesz wyjaśnić, dlaczego przyjmujesz to podejście, ponieważ lepsze zrozumienie przestrzeni problemów poprawi odpowiedzi.
Lazarus

@lazarus, proponuję 2 kliknięcia tego samego linku. 1, aby najpierw coś zrobić, a następnie 2., aby potraktować link jako link.
davebowker

@daviddorward, do tej pory próbowałem zwrócić wartość false i przechodzi ona do drugiej części mojego celu, tj. nie pozwalając przejść przez drugie kliknięcie. Jeśli mógłbyś napisać krótki przykład, byłbym bardzo wdzięczny.
davebowker

Odpowiedzi:


364
$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Zapobiegnie to domyślnemu zachowaniu hiperłącza, które polega na odwiedzeniu określonego href.

Z jQuery samouczka :

W przypadku kliknięć i większości innych zdarzeń można zapobiec domyślnemu zachowaniu - tutaj, pod linkiem do jquery.com - wywołując event.preventDefault () w module obsługi zdarzeń

Jeśli chcesz preventDefault()tylko wtedy, gdy określony warunek jest spełniony (na przykład coś jest ukryte), możesz przetestować widoczność swojego ul z rozszerzoną klasą . Jeśli jest widoczny (tzn. Nie ukryty), link powinien zostać uruchomiony normalnie, ponieważ instrukcja if nie zostanie wprowadzona, a zatem zachowanie domyślne nie zostanie uniemożliwione:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});

3
Z jQuery 1.7+ możesz używać włączania / wyłączania: stackoverflow.com/questions/209029/...
Lance Cleveland

jeśli ma href i onclick, to zadziała $ ("# myLink"). attr ('onclick', '') .click (function (e) {e.preventDefault ();});
Ronald McDonald,

zrealizowane przez ajax i jquery. Mogę ukryć href buy z wywołaniem zwrotnym, aby uniemożliwić zgarniaczom uzyskanie tych linków. Wielkie dzieki!
Cesar Bielich,

ten post ma najłatwiejszy sposób przy użyciu bootstrap , nadzieja pomaga.
shaijut

107

Spróbuj tego:

$("a").removeAttr('href');

EDYTOWAĆ-

Ze zaktualizowanego kodu:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);

3
Gra z href jest bardzo przyjemna, ponieważ jest to szybki sposób na dezaktywację linku, który wykonuje akcję poprzez zdarzenie onclick. Bardzo, bardzo mądry!
daitangio,

słodka metoda, aby powstrzymać przeglądarkę przed dodawaniem # w URI podczas wykonywaniahref="#"
Abela

65

Dla innych, którzy przybyli tutaj za pośrednictwem Google, takich jak ja - oto inne podejście:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

Pamiętaj: nie tylko jest to klasa css

class = „Buttonstyle”

ale także te dwa

class = „wyłączony styl przycisków”

dzięki czemu możesz łatwo dodawać i usuwać kolejne klasy za pomocą jQuery. Nie trzeba dotykać href ...

Uwielbiam jQuery! ;-)


2
zakłada to, że link nie ma celu :)
dstarh

2
Zamiast robić całą tę fantazję, dlaczego nie po prostu wcisnąć przycisku onclick wyżej w domenie, użyj on()do filtrowania wszystkich a.disabledlinków i zapobiegania domyślnym. Następnie wszystko, co musisz zrobić, to włączyć / wyłączyć wyłączoną klasę, a link sam się obsłuży, gdy zostanie „włączony”.
CodeChimp

Nie ma potrzeby, aby „== true” - addClass („wyłączone”) będzie działać niezależnie. if(disabledCondition)
Fox Wilson

1
@fwilson, podczas gdy masz całkowitą rację, dla początkującego programisty łatwiej zrozumieć == true. :)
karmenizm

Czy jest jakiś konkretny powód, aby tego nie upraszczać if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Mir

58

Oto alternatywne rozwiązanie css / jQuery, które preferuję ze względu na zwięzłość i zminimalizowane skrypty:

css:

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});

7
Od Mozilli : „Ostrzeżenie: użycie zdarzeń wskaźnikowych w CSS dla elementów innych niż SVG jest eksperymentalne. Ta funkcja była częścią specyfikacji roboczej interfejsu użytkownika CSS3, ale z powodu wielu otwartych problemów została przełożona na CSS4”.
znaczniki pojedynków

1
To dobra uwaga, ale zdarza się, że działa dobrze w większości nowoczesnych przeglądarek.
Peter DeWeese

Możesz rozważyć łańcuch .prop("tabindex", "-1");poaddClass
Oleg Grishko

19

Możesz usunąć kliknięcie linku, wykonując następujące czynności;

$('#link-id').unbind('click');

Możesz ponownie włączyć link, obserwując,

$('#link-id').bind('click');

Nie można używać właściwości „disabled” dla łączy.


1
Łatwe włączanie i wyłączanie w porównaniu do innych.
python1981

2
„Nie można używać właściwości„ wyłączony ”dla łączy.” Zastanawiam się, dlaczego nie ma spójności między przyciskiem a łączem do wyłączenia. „wyłączone” powinno również działać z linkiem. To tak, jakby powiedzieć, że w samochodzie Chevy musisz nacisnąć pedał hamulca, aby się zatrzymać, ale w przypadku tego innego producenta samochodu musisz użyć dźwigni znajdującej się na dachu.
eaglei22

14

Jeśli wybierzesz trasę href, możesz ją zapisać

Wyłączyć:

$('a').each(function(){
    $(this).data("href", $(this).attr("href")).removeAttr("href");
});

Następnie włącz ponownie, używając:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

W jednym przypadku musiałem to zrobić w ten sposób, ponieważ zdarzenia kliknięcia były już powiązane gdzie indziej i nie miałem nad tym kontroli.


12

Zawsze używam tego w jQuery do wyłączania linków

$("form a").attr("disabled", "disabled");

Możesz także użyć, $("form a").attr("disabled", false);aby włączyć ją ponownie
Alexander Ryhlitsky

9

przykład linku HTML:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

użyj tego w jQuery

    $('#BT_Download').attr('disabled',true);

dodaj to do css:

    a[disabled="disabled"] {
        pointer-events: none;
    }

1
Nigdy wcześniej nie spotkałem się z tą właściwością CSS, ale dla mnie jest to zdecydowanie najprostsza metoda wyłączenia hiperłącza. Piękno polega na tym, że po usunięciu klasy zawierającej pointer-events: nonewłaściwość z elementów kotwiczących powracają do robienia tego, co poprzednio robili po kliknięciu. Więc jeśli byłyby to podstawowe hiperłącza, powracają do nawigacji do adresu URL w swoim hrefatrybucie, a jeśli mają ustawioną procedurę obsługi zdarzenia kliknięcia, staje się ona ponownie aktywna. Znacznie prostsze niż zapisywanie hrefwartości i procedur obsługi kliknięć.
Philip Stratford,

Podoba mi się to rozwiązanie, jest najprostsze.
Louis

Z garstki „rozwiązań”, kiedy nic nie działało (i prawie zrezygnował z tej trasy), przyszedł do tego klejnotu . To bezproblemowe rozwiązanie. I jedyny, który NAPRAWDĘ DZIAŁA. Sława.
user12379095

5

Moje ulubione w „kasie do edycji przedmiotu i zapobieganiu kliknięciom„ dzikiego zachodu ”w dowolnym miejscu - w kasie”

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

Więc jeśli chcę, aby wszystkie linki zewnętrzne na pasku narzędzi drugiej akcji były wyłączone w „trybie edycji”, jak opisano powyżej, dodam funkcję edycji

$('#actionToolbar .external').attr('disabled', true);

Przykład linku po pożarze:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

A teraz MOŻESZ użyć wyłączonej właściwości dla linków

Twoje zdrowie!


3

Należy znaleźć odpowiesz tutaj .

Dzięki @Will i @Matt za to eleganckie rozwiązanie.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

3

możesz po prostu ukryć i pokazać link, jak chcesz

$(link).hide();
$(link).show();

2

Wystarczy uruchomić coś, ustawić flagę, zwrócić false. Jeśli flaga jest ustawiona - nie rób nic.


Próbowałem tego, ustawiając klasę, a następnie wywołując tę ​​klasę później, ale zwraca wartość false, i zapobiega wywołaniu linku.
davebowker

1

unbind()był przestarzały jQuery 3, off()zamiast tego użyj metody:

$("a").off("click");

0

Wiem, że nie dotyczy to jQuery, ale możesz wyłączyć link za pomocą prostego css:

a[disabled] {
  z-index: -1;
}

wyglądałby HTML

<a disabled="disabled" href="/start">Take Survey</a>

0

Działa to w przypadku łączy, które mają wbudowany atrybut onclick. Pozwala to również później usunąć „return false” w celu włączenia.

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });

-2

Po prostu użyj $("a").prop("disabled", true);. To naprawdę wyłączy element de link. Musi być prop("disabled", true). Nie używajattr("disabled", true)

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.