2009-05-20 7 views
25

Wie kann ich ein Click-Ereignis an eine Schaltfläche anhängen und Postback verhindern?jQuery verhindert Postback bei Klick auf die Schaltfläche

Der Code, den ich habe, scheint nicht zu funktionieren.

$('#btnNext').click(function() { 
     return false; 
    }); 
+0

Siehe dies zu verhindern: [Wie ein Ereignishandler entfernen] (http://jquery.open2space.com/node/23) Und das: [beste Möglichkeit, einen Event-Handler in jquery zu entfernen?] (http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in- jquery) –

+0

Gute Frage, aber kein vergleichendes Beispiel. Da Webentwickler heutzutage einen gemischten Ansatz verwenden, ist es immer gut, ein Beispiel für das HTML-Steuerelement anzugeben, das nicht nur den Typ des Selektors annimmt. – GoldBishop

Antwort

54
$('#btnNext').click(function(e) { 
     e.preventDefault(); 
    }); 
+2

Mir ist aufgefallen, dass dies auch wegen asp.net rendering nicht funktioniert. Meine Schaltfläche wird mit einem "javascript: __ doPostBack (") gerendert. Irgendwelche Ideen, wie man das loswerden kann? –

+0

Ändern Sie die '$ ('# btnNext')' in diese: '$ ('# <% = btnNext.ClientID% > ') '. Standardmäßig verwendet ASP.Net ihre eigene ID-Benennung ... also kann man mit der ClientID-Eigenschaft den tatsächlichen Namen als Referenz erhalten –

+0

Antwort von User434917 hinzufügen: Encosia hat eine gute Beschreibung auf dieser [hier ] (http://encosia.com/button-click-handlers-ajax-premature-submission/) - (Button-Klick-Handler, AJAX und vorzeitige Einreichung) – amorin

16

ich mit einem Knopf und entdeckt arbeitet, dass, wenn Sie auf die Schaltfläche zu tun, einen Auto-Postbacks verhindern wollen, müssen Sie den Typen als „Knopf“ angeben. Zum Beispiel:

<button id="saveButton">Save</button> 

--Dieser wird ein Auto-Postbacks (getestet in IE)

<button type="button" id="saveButton">Save</button> 

--Dieser wird nicht

hoffte, das hilft jemanden generieren.

+1

Elegant, einfach und erfordert keinerlei js. Nicht nur löste dies mein Problem, sondern tat es auch so in einer Weise, die meine Codebasis nicht aufgebläht hat. Danke! –

+0

@JoeWerner Problem ist das Einige Entwickler verwenden die ASP-Steuerelemente anstelle von reinem HTML. Einige Entwickler sind faul, ich weiß. So oder so funktioniert das nur für diejenigen, die Raw HTML verwenden, um eine Webseite zu erstellen. – GoldBishop

0

innerhalb der Schaltfläche Tag, verwenden Sie type = "Button", um von Post zurück zu verhindern.

2

In Asp.net auf Seite Postbacks auf die Schaltfläche klicken Verwendung prevent() Funktion

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title>WebForm1</title> 
     <script src="js/jquery-2.2.2.js" type="text/javascript"></script> 
     <script> 
      $(document).ready(function() { 
       $("#btnshow").click(function (e) { 
        e.preventDefault(); 
        $("#Label1").show(); 
       }); 
       $("#btnhide").click(function (e) { 
        e.preventDefault(); 
        $("#Label1").hide(); 
       }) 
      }); 
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div> 

     </div> 
      <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
      <asp:Button ID="btnshow" runat="server" Text="Show" /> 
      <asp:Button ID="btnhide" runat="server" Text="Hide" /> 
     </form> 


    </body> 
    </html> 
+0

Dies ist wahrscheinlich der beste praktische Ansatz, da er direkt auf das .Net-Problem bezogen ist. In einigen Szenarios sollten Sie auch die Zuweisung dynamischer Steuerelement-IDs durchführen, die für die Umgebung aussteht. – GoldBishop

Verwandte Themen