Code jQuery Konflikt mit Submit-Buttons

Question

Ich habe diesen Code auf meiner Website:

$('input[type="submit"], a').not('[target=_blank]').click(function(){ 
     var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0; 
     if(!bad) { 
      $(".load-overlay").show(); 
      return true; 
     } 
     return true; 
    }); 

Dies soll einen Ladebildschirm auf gültige Links zeigen; Gültige Links sind Links ohne JavaScript in der href oder mit # in der href. Auch gültige Links haben keine target = _blank-Attribute.

Es macht seine Arbeit, aber es widerspricht den Submit-Tasten.

Der Ladebildschirm (.load-overlay) wird nicht auf Sendeschaltflächen angezeigt, aber er ist im Code definiert. Was ist los damit? Ich habe keine Fehler in der Konsole.

Answer 1

Es ist, weil eine Eingabe kein href-Attribut hat. Aus diesem Grund wird eine TypeError Exception ausgelöst, wenn Sie auf eine Senden-Schaltfläche klicken. Sie müssen überprüfen, ob this.href vorhanden ist, bevor Sie es verwenden.

Änderung

var bad = this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0; 

zu

var bad = typeof this.href !== "undefined" && (this.href.lastIndexOf('#') >= 0 || this.href.indexOf('javascript') >= 0); 

bearbeiten:

Dies löst das Problem mit dem Ladebildschirm nach oben nicht angezeigt wird, wenn ein Submit-Button klicken, aber für sie Zukunft ändert Es ist gut zu wissen, dass this.href einen anderen Wert zurückgibt als erwartet.

this.href gibt die vollständige geparste URL zurück, auf die der Link verweist. Wenn Sie eine Verknüpfung mit einer relativen URL haben, unterscheidet sich dieser Wert von dem "href" -Attribut in Ihrem HTML. Um den genauen Wert des HTML-Attributs zu erhalten, verwenden Sie jQuery Function .attr oder die JavaScript-Funktion getAttribute.

Beispiel: <a href="/home">Home</a>

In diesem Fall this.href ist http://yourdomain.com/home, aber this.getAttribute("href") ist /home.

Für Ihre aktuelle Implementierung ist dies irrelevant. Aber vielleicht möchten Sie in Zukunft überprüfen, ob das href-Attribut mit einem # beginnt oder ob es vor einer anderen URL eine URL gibt.