jQuery Klick bringt mich zum Anfang der Seite, aber ich muß bleiben, wo ich im

Question

Ich habe diesen Code:

$('.bidbutton').on("click", function() { 

    $('.addOffer').hide(); 

    $('.preko').show(); 
     var i = $(this).attr('klik'); 
     $('.i'+i).hide(); 
     $('.j'+i).show(); 
}); 

Wenn ich jetzt klicken jquery mich von Seite an die Spitze bringen, aber ich muß bleiben, wo ich bin.

Ich versuche

$('.bidbutton').on("click", function() { 

    $('.addOffer').hide(); 

    $('.preko').show(); 
     var i = $(this).attr('klik'); 
     $('.i'+i).hide(); 
     $('.j'+i).show(); 
     evt.preventDefault(); 
}); 

aber nicht funktionieren ... Wie dieses Problem zu lösen?

Frage Update:

<div class="row preko i2" index="2" style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(255, 255, 255); display: none;"> 
    <div class="col-md-2 col-xs-2" style=" background: #f4f4f4; "> 
     <h3 class="text-center">20.</h3> 
     <p class="text-center">Apr</p> 
    </div> 
    <div class="col-md-8 col-xs-8 text-center"> 
     <h3>$55</h3> 
     <p>current bid</p> 
    </div> 
    <div class="col-md-2 col-xs-2" style=" margin-top: 25px; "> <a href="#" klik="2" class="btn btn-info btn-lg bidbutton pull-right">Bid Now</a> </div> 
</div> 
<div class="row addOffer j2" style="display: block;" index="2"> 
    <div class="col-md-2 col-xs-2" style=" background: #f4f4f4; "> 
     <h3 class="text-center">20.</h3> 
     <p class="text-center">Apr</p> 
    </div> 
    <div class="col-md-10" style="margin-top:10px;"> 
     <form method="POST" action="http://localhost:8888/offers" id="target" accept-charset="UTF-8"> 
     <input type="hidden" name="_token" value="BWSwRnV8diq3QEF5FKcRa0ThWpBODKSMAlwEWZEH"><input name="article_id" type="hidden" value="8"><input name="start" class="hstart" type="hidden" value="04/20/2016 12:00 am"><input name="provera" class="provera" type="hidden" value="522"> 
     <div class="input-group bootstrap-touchspin" style="padding:10px;"> 
      <span class="input-group-btn"><button class="btn btn-default bootstrap-touchspin-down" type="button">-</button></span><span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span><input id="price" type="text" class="form-control price input-lg" name="price" value="55" style="display: block;"><span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span> 
      <div class="input-group-btn"><button class="btn btn-default bootstrap-touchspin-up" type="button">+</button><button type="submit" class="btn btn-info input-lg okvir">PLACE BID</button></div> 
     </div> 
     </form> 
    </div> 
</div> 

Hier ist mein Update mit HTML-Code zu hinterfragen ...

Answer 1

Ihre Event-Handler-Funktion für den click Ereignis-Listener das erste Argument fehlt, die das ist jQuery Event Object. Sie benötigen eine Funktion zu ändern:

$('.bidbutton').on("click", function(evt) { 
    evt.preventDefault(); 
    // do stuff 
} 

Hier sind die docs auf dem .click() Ereignis-Listener. Achten Sie auf das Format der Handler-Funktion.

Das Argument eventObject ist optional für eine Handler-Funktion, außer wenn Sie tatsächlich etwas mit dem Ereignis tun müssen. Sie können den Wert eventObject einem beliebigen Wert zuweisen, und in Codebeispielen finden Sie häufig e, evt oder event. Im Falle Ihrer speziellen Taste, ich dies unter der Annahme, das .bidbutton Element Sie die Click-Handler sind die Zuweisung zu:

<button type="submit" class="btn btn-info input-lg okvir">PLACE BID</button> 

Seit dieser button hat type="submit", sie die Form einreicht und die Seite neu geladen wird. Durch das Hinzufügen von evt.preventDefault() ändern Sie dieses Verhalten, aber dies bedeutet auch, dass Sie JavaScript verwenden müssen, um Ihr Formular an Ihren Server zu senden. Verweise auf die docs auf jQuery.ajax(), um dies zu tun oder MDN's guide to Ajax.

Answer 2

Geben Sie einfach evt an die Funktion wie folgt:

function(evt)