javascript - 评论按钮在 jquery 函数中不起作用

Question

我正在开发一个食品购物网站。我的产品基于 ajax 调用显示在 order.php 页面上，该调用将采用下拉列表中的默认类别。这些项目显示在卡片中，每个卡片都有一个具有“评论”类别的评论按钮。但是，当我使用 jquery 对按钮进行测试时，页面只是重新加载，没有任何操作。请帮助我

//order.php

<div id="message">
 </div>

 <div class="container" style="position:relative; top:200px; float:center">

 <div class="collapse" id="filterdiv">

 <form class="d-inline">
    <select id="Category">
        <option value='' selected>All</option>
        <?php 
        $fCategory="SELECT DISTINCT Food_Type from food";
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $res=$conn->query($fCategory);

        if($res->rowCount()>0)
        {
            while($row=$res->fetch(PDO::FETCH_ASSOC))
            {
                echo "<option value=".$conn->quote($row['Food_Type']).">".$row['Food_Type']." 
       </option>";
            }
        }

        ?>


    </select>

    <select id="price">
    <option value="">Price</option>
    <option value="lowtohigh">Low to High</option>
    <option value="hightolow">High to Low</option>
    <
    </select>
  </form> 
  </div>



  <div class="row" id="result">

   </div>
   </div>




<script type="text/javascript" src="Bootstrap4/js/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="Bootstrap4/js/bootstrap.min.js"></script>

<!--Ajax code to get food info-->
<script type="text/javascript">
    $(document).ready(function()
    {

    $("#filterdiv").ready(function(){

        let foodType=$("#Category").val();
        let price=$("#price").val();

        $.ajax({
            url:'action.php',
            method:'post',
            data:{foodType:foodType,price:price},
            success:function(response)
            {
                $("#result").html(response);
            }
        });     
    });


    });

</script>   


   Now for action.php
   if (isset($_POST['foodType']) || isset($_POST['price']))
   {
    $foodType=$price=$priceSort=$foodSort="";

    if (isset($_POST['foodType']))
    {
        $foodType=$_POST['foodType'];
        if ($foodType=='')
        {
            $foodSort='';
        }
        else
        {
            $foodSort="WHERE Food_Type=".$conn->quote($foodType);
        }

    }

    if (isset($_POST['price']))
    {
        $price=$_POST['price'];

        if ($price=="lowtohigh")
        {
            $priceSort="ORDER BY `Food_Price(Rs)` ASC";
        }

        else if ($price=='hightolow')
        {
            $priceSort="ORDER BY `Food_Price(Rs)` DESC";
        }
        else
        {
            $priceSort="";
        }
      }

    $foodDisp="SELECT * FROM food ".$foodSort." ".$priceSort;
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $res=$conn->query($foodDisp);

    while($row=$res->fetch(PDO::FETCH_ASSOC))
    {

        ?>

    <div class="col-lg-3 mx-0">
        <div class="card-deck" style="display:flex; flex:flex-wrap; padding:2px;">
            <div class="card bg-transparent p-2 h-100 border-secondary mx-0 mb-2" style="min- 
         height:35rem;max-height:35rem;">
            <img src="<?= 'foodImages/'.$row['Food_Url'] ?>" class="card-img-top img-fluid img- 
            responsive img-thumbnail" height="100" width="100%">
            <div class="card-body p-1 text-center">

                <h4 class="card-title text-center text-info"><?php echo $row['Food_Name']; ?>
                </h4>
                <h5 class="card-text text-center text-white"><?php echo $row['Food_Description']; 
            ?>
                </h5>
                <h5 class="card-text text-center text-danger"><?php echo "Rs 
               ".$row['Food_Price(Rs)']; ?>
                </h5>
                <button class="btn btn-success reviews">Reviews</button>
            </div>

                <div class="footer p-1">
                    <form action="" class="form-submit">
                    <input type="hidden" class="fid" value="<?php echo $row['Food_Id'] ;?>
                    ">

                    <input type="hidden" class="fname" value="<?php echo $row['Food_Name'] ;?>
                    ">

                    <input type="hidden" class="fprice" value="<?php echo $row['Food_Price(Rs)'] 
           ;?>
                    ">

                    <input type="hidden" class="fimage" value="<?php echo $row['Food_Url'] ;?>
                    ">

                    <input type="hidden" class="ftype" value="<?php echo $row['Food_Type'] ;?>
                    ">

                    <button class="btn btn-info btn-block addItemBtn">Add to cart</button>


                    </form>
                </div>
            </div>
        </div>
    </div>



 <?php }
  }
  ?>

Answer 1

更改JS函数:

$("form.d-inline select").on('change', function(){

        let foodType=$("#Category").val();
        let price=$("#price").val();

        $.ajax({
            url:'action.php',
            method:'post',
            data:{foodType:foodType,price:price},
            success:function(response)
            {
                $("#result").html(response);
            }
        });     
    });