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)

jQuery点击带我到页面顶部，但我需要留在我的地方

2 个答案: