CODEWITHSUNDEEP
javascriptjqueryhtmlclickpreventdefault
Andrew
Andrew

Reputation: 2198

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

I have this code:

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

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

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

Now when I click jquery bring me to the top of page but I need to stay where I am.

I try 

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

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

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

but dont work... How to solve this problem?

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

Here is my update to question with html code...

Upvotes: 0

Views: 159

Answers (2)

metame
metame

Reputation: 2640

Your event handler function for the click event listener is missing the first argument, which is the jQuery Event Object. You need to change your function to:

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

Here are the docs on the .click() event listener. Pay attention to the handler function format.

The eventObject argument is optional on a handler function except when you actually need to do something with the event. You can assign the eventObject to any value you want, and you will often see e, evt, or event in code examples. In the case of your particular button, I'm assuming this is the .bidbutton element you're assigning the click handler to:

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

Since this button has type="submit", it is submitting the form and reloading the page. By adding evt.preventDefault() you are changing this behavior, but this also means you will need to use JavaScript to submit your form to your server. Reference the docs on jQuery.ajax() to do this or MDN's guide to Ajax.

Upvotes: 4

user5294439
user5294439

Reputation:

Simply pass evt to the function like so:

function(evt)

Upvotes: 1

Related Questions