jQuery点击将我带到页面顶部，但我需要呆在原地

jQuery click brings me to top of page but I need to stay where I im

本文关键字：顶部 原地 jQuery      更新时间：2024-05-31

我有这个代码：

$('.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();
 });

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

Q估计更新：

<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代码问题的更新。。。

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

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

以下是关于.click()事件侦听器的文档。请注意处理程序函数的格式。

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()上的文档或MDN的Ajax指南。

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

function(evt)
相关文章：