Why this button is not working

Question

Need help with something why is not working...

I have a button inside of each row of pagination, that button is redirect to other page preview.php page for more to read information about the items with id number.

And now I want to change and I would like to fill a div e.g.

with slideup and slide down instead of redirect to preview.php.

I have created jquery like this...

    $(document).ready(function(){
  $("#button").click(function(){
    $(".contenthere").slideToggle("slow");
     $('.contenthere').load('preview-print.php?pid=<?php echo $product_id;?>');
  });});

and the button i create like this...

    <td id="button"><a class="button" href='preview.php?pid=<?php echo $product_id;?>'><span class="print-icon">edit</span></a></td>

why is this not working from inside of pagination column but is working fine outside of pagination!

Does anyone can help me how to solve that!

Answer 1

You have to prevent the default action of the anchor, otherwise it will just redirect

$(document).ready(function(){
    $("#button").on('click', function(e){
        e.preventDefault();
        $(".contenthere").slideToggle("slow");
        $('.contenthere').load('preview-print.php?pid=<?php echo $product_id;?>');
    });
});