jQuery deaktiviert einen Link


284

Weiß jemand, wie man einen Link in jquery OHNE Verwendung deaktiviert return false;?

Insbesondere versuche ich, den Link eines Elements zu deaktivieren, einen Klick mit jquery darauf auszuführen, der einige Dinge auslöst, und diesen Link dann wieder zu aktivieren, damit er standardmäßig funktioniert, wenn er erneut angeklickt wird.

Vielen Dank. Dave

UPDATE Hier ist der Code. Nachdem die .expandedKlasse angewendet wurde, muss der deaktivierte Link wieder aktiviert werden.

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

7
Warum die Anforderung, return nicht false zu verwenden? Verwenden Sie es und löschen Sie dann den Ereignishandler, wenn er nicht mehr gilt (oder fügen Sie eine Bedingung hinzu, um je nach Status der genannten "einige Dinge" unterschiedliche Werte zurückzugeben).
Quentin

Versuchen Sie nur, eine Vorverarbeitung durchzuführen, bevor der Link mit derselben Klickaktion verfolgt wird? dh Sie schlagen nicht zwei Klicks vor, sondern Benutzerklicks Link, einige Aktionen passieren, Link wird gefolgt?
Lazarus

Andernfalls können Sie erklären, warum Sie diesen Ansatz wählen, da ein besseres Verständnis des Problembereichs die Antworten verbessert.
Lazarus

@lazarus, ich schlage 2 Klicks auf den gleichen Link vor. 1, um zuerst ein paar Sachen zu machen, dann die 2., um den Link als Link zu behandeln.
Davebowker

@daviddorward, Bisher habe ich versucht, false zurückzugeben, und es geht weiter zum zweiten Teil meines Ziels, dh es wird nicht zugelassen, dass der zweite Klick durchgeht. Wenn Sie ein kurzes Beispiel schreiben könnten, wäre ich Ihnen sehr dankbar.
Davebowker

Antworten:


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

Dadurch wird das Standardverhalten eines Hyperlinks verhindert, der darin besteht, die angegebene href zu besuchen.

Aus dem jQuery- Tutorial :

Bei Klick- und den meisten anderen Ereignissen können Sie das Standardverhalten verhindern - hier über den Link zu jquery.com - indem Sie event.preventDefault () im Ereignishandler aufrufen

Wenn Sie nur möchten, preventDefault()wenn eine bestimmte Bedingung erfüllt ist (z. B. etwas ist verborgen), können Sie die Sichtbarkeit Ihrer Ul mit der erweiterten Klasse testen . Wenn es sichtbar (dh nicht ausgeblendet) ist, sollte der Link wie gewohnt ausgelöst werden, da die if-Anweisung nicht eingegeben wird und somit das Standardverhalten nicht verhindert wird:

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

3
Mit jQuery 1.7+ können Sie ein / aus verwenden: stackoverflow.com/questions/209029/…
Lance Cleveland

Wenn es ein href und einen onclick hat, funktioniert dies $ ("# myLink"). attr ('onclick', '') .click (function (e) {e.preventDefault ();});
Ronald McDonald

realisiert durch ajax und jquery kann ich einen href buy mit dem rückruf verstecken, um zu verhindern, dass schaber diese links bekommen. Super danke!
Cesar Bielich

Dieser Beitrag hat den einfachsten Weg mit Bootstrap , Hoffnung hilft.
Shaijut

107

Versuche dies:

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

BEARBEITEN-

Aus Ihrem aktualisierten Code:

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

3
Das Spielen mit href ist sehr schön, da es eine schnelle Möglichkeit ist, einen Link zu deaktivieren, der über ein Onclick-Ereignis Aktionen ausführt. Sehr sehr klug!
Daitangio

süße Methode, um den Browser davon abzuhalten, das # innerhalb der URI hinzuzufügen, wenn Sie dies tunhref="#"
Abela

65

Für andere, die wie ich über Google hierher gekommen sind - hier ist ein anderer Ansatz:

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')

Denken Sie daran: Nicht nur dies ist eine CSS-Klasse

class = "buttonstyle"

aber auch diese beiden

class = "buttonstyle disabled"

So können Sie mit jQuery problemlos weitere Klassen hinzufügen und entfernen. Keine Notwendigkeit, href zu berühren ...

Ich liebe jQuery! ;-);


2
Dies setzt voraus, dass der Link kein Ziel hat :)
dstarh

2
Anstatt all diese Phantasie zu üben, sollten Sie den Onclick im Dom höher schalten, on()alle a.disabledLinks filtern und Standardwerte verhindern. Dann müssen Sie nur noch die deaktivierte Klasse ein- und ausschalten, und der Link wird sich selbst behandeln, wenn er aktiviert ist.
CodeChimp

"== true" ist nicht erforderlich - addClass ('disabled') wird unabhängig davon ausgeführt. if(disabledCondition)
Fox Wilson

1
@fwilson, während Sie völlig korrekt sind, ist es für einen beginnenden Programmierer einfacher, mit dem zu verstehen == true. :)
Karmenismus

Gibt es einen besonderen Grund, es nicht zu vereinfachen if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Mir

58

Hier ist eine alternative CSS / JQuery-Lösung, die ich wegen ihrer Knappheit und minimierten Skripterstellung bevorzuge:

CSS:

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

jQuery:

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

7
Von Mozilla : "Warnung: Die Verwendung von Zeigerereignissen in CSS für Nicht-SVG-Elemente ist experimentell. Die Funktion war früher Teil der CSS3-UI-Entwurfsspezifikation, wurde jedoch aufgrund vieler offener Probleme auf CSS4 verschoben."
Duelin Marker

1
Das ist eine gute Überlegung, aber es funktioniert in den meisten modernen Browsern gut.
Peter DeWeese

Vielleicht möchten Sie eine Verkettung .prop("tabindex", "-1");nach demaddClass
Oleg Grishko

19

Sie können den Klick für den Link entfernen, indem Sie folgendermaßen vorgehen:

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

Sie können den Link wie folgt wieder aktivieren:

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

Sie können die Eigenschaft 'disabled' nicht für Links verwenden.


1
Einfaches Ein- und Ausschalten im Vergleich zu anderen.
Python1981

2
"Sie können die Eigenschaft 'disabled' nicht für Links verwenden." Ich frage mich, warum es keine Konsistenz zwischen einer Schaltfläche und einem Link zum Deaktivieren gibt. "deaktiviert" sollte auch für einen Link funktionieren. Es ist wie zu sagen, dass Sie für ein Chevy-Auto das Bremspedal betätigen müssen, um anzuhalten, aber für diesen anderen Autohersteller müssen Sie diesen Hebel auf dem Dach verwenden.
eaglei22

14

Wenn Sie die href-Route wählen, können Sie sie speichern

Etwas deaktivieren:

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

Aktivieren Sie dann erneut mit:

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

In einem Fall musste ich es so machen, weil die Klickereignisse bereits woanders gebunden waren und ich keine Kontrolle darüber hatte.


12

Ich benutze dies immer in jQuery, um Links zu deaktivieren

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

Sie können es auch verwenden $("form a").attr("disabled", false);, um es wieder zu aktivieren
Alexander Ryhlitsky

9

Beispiel für einen HTML-Link:

        <!-- 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>

Verwenden Sie dies in jQuery

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

füge dies zu css hinzu:

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

1
Ich bin noch nie auf diese CSS-Eigenschaft gestoßen, aber für mich ist dies bei weitem die einfachste Methode zum Deaktivieren eines Hyperlinks. Das Schöne daran ist, dass beim Entfernen der Klasse, die die pointer-events: noneEigenschaft enthält, aus den Ankerelementen wieder das getan wird, was sie zuvor beim Klicken getan haben. Wenn es sich also um einfache Hyperlinks handelt, navigieren sie wieder zur URL in ihrem hrefAttribut. Wenn ein Klickereignishandler festgelegt ist, wird dieser wieder aktiv. Viel einfacher als das Speichern von hrefWerten und Klick-Handlern.
Philip Stratford

Ich mag diese Lösung, es ist die einfachste.
Louis

Aus einer Handvoll "Lösungen", bei denen nichts funktionierte (und diese Route fast aufgab), kam dieses Juwel . Es ist eine unkomplizierte Lösung. Und der einzige, der wirklich funktioniert. Ein großes Lob.
user12379095

5

Mein Favorit in "Zur Kasse gehen, um ein Element zu bearbeiten und zu verhindern, dass - wilde Wilde West-Klicks irgendwo hin - während einer Kasse" funktioniert

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

Wenn ich also möchte, dass alle externen Links in einer zweiten Aktionssymbolleiste im oben beschriebenen "Bearbeitungsmodus" deaktiviert werden, füge ich die Bearbeitungsfunktion hinzu

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

Linkbeispiel nach einem Brand:

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

Und jetzt können Sie deaktivierte Eigenschaften für Links verwenden

Prost!


3

Sie sollten Sie antworten finden hier .

Vielen Dank an @Will und @Matt für diese elegante Lösung.

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

3

Sie können den Link einfach ausblenden und anzeigen, wie Sie möchten

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

2

Einfach Sachen auslösen, ein Flag setzen, false zurückgeben. Wenn das Flag gesetzt ist, nichts tun.


Habe das versucht, indem ich eine Klasse gesetzt und diese Klasse später aufgerufen habe, aber false zurückgegeben habe, um zu verhindern, dass der Link aufgerufen wird.
Davebowker

1

unbind()wurde in veraltet jQuery 3, verwenden Sie off()stattdessen die Methode:

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

0

Ich weiß, dass dies nicht mit jQuery ist, aber Sie können einen Link mit einem einfachen CSS deaktivieren:

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

Das HTML würde so aussehen

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

0

Dies funktioniert für Links, für die das Attribut onclick inline festgelegt ist. Auf diese Weise können Sie auch später "return false" entfernen, um es zu aktivieren.

        //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

Einfach benutzen $("a").prop("disabled", true);. Dadurch wird das Linkelement wirklich deaktiviert. Muss sein prop("disabled", true). Nicht benutzenattr("disabled", true)

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.