Warum erfolgt die Weiterleitung, bevor mein jQuery-Klickereignis für ein HTML-Ankerelement ausgelöst wird?

Question

Ich versuche, die OnBeforePageUnload nur auszulösen, wenn der Benutzer das Tab oder Browserfenster schließt. Wenn der Benutzer auf meiner Website navigiert, habe ich einen benutzerdefinierten Mechanismus, der einen Warndialog auslöst, um zu verhindern, dass der Benutzer die eingegebenen Daten verliert. Also jedes Mal, wenn ein Link auf meiner Seite geklickt wurde, habe ich die eine Fahne:

$('a[href]').click(function (event) { 
    buttonOutsidePageClicked = false; 
}); 

Dann wird das onbeforepageunload Ereignis ausgelöst wird. Ich überprüfe den Wert der Flagge, um zu sehen, ob ich das in onbeforeunload Dialog aufgebaut zeigen soll oder nicht:

function OnBeforeUnload(oEvent) { 
if (buttonOutsidePageClicked) 
    return navAwayMessage; 
} 

Dies funktioniert gut für all meine Links auf der Seite mit folgenden Ausnahmen ein:

<a id="cpm_UploadLink" class="button" rel="no" href="/pages/otherPage"> 
    <span class="btnLeft"></span> 
    <span class="btnMiddle">Click Me</span> 
    <span class="btnRight"></span> 
</a> 

Diese HTML wird von einem benutzerdefinierten Web-Steuerelement erstellt. Wenn ich auf den Link klicke, werde ich auf die andere Seite weitergeleitet, ohne dass das Klick-Ereignis ausgelöst wurde. Also kann ich das Flag nicht setzen und die eingebaute onbeforeunload Nachricht wird angezeigt.

Wenn ich hinzufügen, ein Inline das Onclick-Attribut direkt in der Steuerung wie folgt hinzu:

<a id="cpm_UploadLink" class="button" rel="no" href="/pages/otherPage" 
    onclick="javascript:buttonOutsidePageClicked = false;"> 
     <span class="btnLeft"></span> 
     <span class="btnMiddle">Click Me</span> 
     <span class="btnRight"></span> 
</a> 

Alles funktioniert gut. Aber das ist nicht die Art, wie ich das lösen möchte.

Kann mir jemand erklären, welchen Fehler ich hier mache?

Ich habe viel Code gesucht und probiert, aber ohne Erfolg.

Ich fand diesen Beitrag Preventing Links before jQuery is Loaded aber ich weiß nicht, ob das etwas mit meinem Problem zu tun hat, weil ich es nur mit einem Link habe.

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Da Ihr HTML-Code vom benutzerdefinierten Web-Steuerelement erstellt wird, müssen Sie möglicherweise live() oder on() für JQuery 1.7 und höher verwenden, um Ihr Klickereignis zu binden.

Zum Beispiel:

$("body").delegate("a","click", function() { 
     buttonOutsidePageClicked = false; 
    }); 

von jquery Version 1.Diese 7 Verwendung:

$("body").on("click", "a", function() { 
    buttonOutsidePageClicked = false; 
}); 

JQuery live()

View online Beispiel here

Answer 2

Zu allererst: Sie können Ihren Code dieses Refactoring:

$('a[href]').click(function (event) { 
    buttonOutsidePageClicked = false; 
}); 

Ihre Antwort liegt wahrscheinlich in:

Diese html durch eine benutzerdefinierte Web-Steuerelement erstellt wird

Sie übernehmen entweder das Klickereignis, sodass jQuery-Klickhandler nicht aufgerufen werden, oder verwenden das Klickereignis auf den inneren <span> -Elementen.

Sie können Firebug- oder Chrome-Entwicklertools verwenden, um alle Ereignis-Listener anzuzeigen. Stellen Sie sicher, dass einer von ihnen jQuery ist.