jQuery不能在循环表单中工作

Question

我有一个循环表单，每个表单都有一个提交按钮，我添加了javascript，当我点击时，它不会重定向到其他页面

但是当我尝试提交javascript不工作它重定向到其他页面，我希望有人可以帮助我

这些是我的loadProduct函数的代码

<?php
include('../classes/class.product.php');
$cat = $_POST['categ'];
$p= new Product();
?> 
<table class="w3-table table table-bordered w3-striped w3-card-4">
<thead>
<tr class="w3-green">
  <th>Product Name</th>
  <th>Price</th>
  <th>Remaining Stock </th>
  <th>Add to List</th>
</tr>
</thead>
<?php
$list_of_product=$p->loadAllProductAccToCategory($cat);
    foreach ($list_of_product as $product) { 
    ?>
       <tr>
         <td><?php echo $product->prodname; ?></td>
         <td><?php echo $product->price; ?></td>
         <td><?php echo $product->remaining_stock; ?>Piece(s)</td>
         <td>
           <form class ="<?php echo $product->prodname; ?>" action="functions/InsertOrders.php" method = "POST">
              <input class='form-control' name='qty' type='text' placeholder="Enter Quantity" autocomplete="off" required />  
              <input type="hidden" name='en'  value=<?php echo $product->id; ?> />
              <input type="hidden" name='price'  value=<?php echo $product->price; ?> />
              <input type="hidden" name='rstock'  value=<?php echo $product->remaining_stock; ?> />
              <button <?php if ($product->remaining_stock<1) { ?>
           disabled="true" class='btn btn-danger glyphicon glyphicon-pencil'
           <?php } ?> class='btn btn-primary glyphicon glyphicon-pencil <?php echo $product->id; ?>'>Add</button>
           </td>
        </form>
     </tr>
<script type="text/javascript">
  $(".<?php echo $product->id; ?>").click(function(){
    $.post( $(".<?php echo $product->prodname; ?>").attr("action"),$(".<?php echo $product->prodname; ?> :input").serializeArray(),function(sv){alert(sv);})
    clear();
  });

  $(".<?php echo $product->prodname; ?>").submit(function(){
    return false;
  });
  function clear(){
    $(".<?php echo $product->prodname; ?> :input").each(function(){
      $(this).val('');
    });
  }
</script>
       <?php
  }
?>

</table>
<!-- <script type="text/javascript">
  $(".sub").click(function(){
    $.post( $(".myForm").attr("action"),$(".myForm :input").serializeArray(),function(sv){alert(sv);})
  });

  $(".myForm").submit(function(){
    return false;
  });
  function clear(){
    $(".myForm :input").each(function(){
      $(this).val('');
    });
  }
</script> -->

Answer 1

$(".<?php echo $product->id; ?>").click(function(event){
    event.preventDefault();
    $.post( $(".<?php echo $product->prodname; ?>").attr("action"),$(".<?php echo $product->prodname; ?> :input").serializeArray(),function(sv){alert(sv);})
    clear();
});