4 Stimmen

jquery - Blockieren Sie bestimmte Links, bevor eine Seite vollständig geladen ist, und binden Sie Klickereignisse

Ich habe ein modales Dialog-Plugin in Jquery geschrieben, das an das Klick-Ereignis aller <a>-Elemente mit einer bestimmten Klasse bindet.

Der modale Dialog 'holt' eine Seite über AJAX, die unter dem 'href'-Parameter des <a>-Elements angegeben wird.

Alles funktioniert gut, aber - wenn ein Benutzer auf den <a>-Link klickt, bevor die Seite vollständig geladen und bereit ist (bevor das Klick-Ereignis an das Element gebunden ist) - navigiert der Browser zu der im Parameter "href" angegebenen Seite.

Gibt es Ideen, wie man dieses Verhalten verhindern kann? Ideal wäre es, Klicks auf diese Elemente zu ignorieren, bevor die Seite vollständig geladen ist. Die Leistung auf der Client-Seite ist entscheidend.

3voto

Rap Punkte 6671

Normalerweise werden Sie es vermeiden, eine href direkt in den Tag zu kodieren. Setzen Sie stattdessen href="javascript:void(0)" und behandeln Sie die Übermittlung mit jQuery.

Machen Sie etwas in dieser Art:

<a onclick="SomeJQueryCall()" href="javascript:void(0)">Click Me!</a>

Und hier ist das jQuery-Skript:

function SomeJQueryCall() {
    //ask the web server for some AJAX xml
    $.get(SomeUrl, null, SomeCallBackFunction(), "xml");
}

3voto

Prem Punkte 15013

Wenn Sie Inline-Scripting vermeiden wollen, können Sie die jQuery-Funktion live()-Methode um einen Event-Handler für Elemente zu binden, die dem DOM noch nicht hinzugefügt wurden:

1) Stellen Sie sicher, dass Sie jQuery in die <head> und nicht die <body> da wir den folgenden Code einleiten müssen vor alle Elemente im Körper geschaffen werden.

2) Fügen Sie Folgendes hinzu, auch in der <head> (z.B. als externe js-Datei):

$("a").live("click", function(){// Use a more specific selector than "a" if poss.
  getAjax( // This is your Ajax function. Adapt as required.
      $(this).attr('href') // Pass in the <a>'s href attribute.
  );
  return false; // Cancel the default click handler, to prevent page redirect.
});

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X