jQuery click 将我带到页面顶部，但我需要留在我的位置

Question

我有这个代码：

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

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

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

现在，当我单击 jquery 时，会将我带到页面顶部，但我需要留在原处。

我试试

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

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

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

但不工作... 如何解决这个问题？

问题更新：

<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>

这是我对 html 代码问题的更新...

Answer 1

click 事件侦听器的事件处理函数缺少第一个参数，即jQuery Event Object。您需要将功能更改为：

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

这是.click() 事件侦听器上的docs。注意处理函数格式。

eventObject 参数在处理函数上是可选的，除非您确实需要对事件执行某些操作。您可以将eventObject 分配给您想要的任何值，并且您会经常在代码示例中看到e、evt 或event。对于您的特定按钮，我假设这是您将点击处理程序分配给的 .bidbutton 元素：

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

由于这个button 有type="submit"，它正在提交表单并重新加载页面。通过添加evt.preventDefault()，您正在改变这种行为，但这也意味着您需要使用 JavaScript 将表单提交到您的服务器。参考jQuery.ajax() 上的docs 来执行此操作或MDN's guide to Ajax。

Answer 2

只需将evt 传递给函数，如下所示：

function(evt)