用jQuery添加到购物车按钮

Question

我使用php jquery将工作添加到购物车格式，但是我尝试了其他未添加的方法，我想知道原因...

下面的第一个代码可以完美地使用jquery和php ...

<?php foreach ($photos as $photo): ?>
    <div class="col-md-3 col-sm-6">
     <a href="order_review.php?id=<?php echo $photo->id; ?>"><img  src="<?php echo $photo->image_path(); 
     ?>" class="img-thumbnail" alt="<?php echo $photo->title; ?>"></a>
    <div class="caption">
    <h3 class="text-info text-center"><?php echo $photo->title; ?></h3>
    <p class="text-danger text-center price"><s>N</s><?php echo $photo->price; ?></p>
    <div class=" mx-auto">
    <select name="quantity" class="custom-select mr-sm-2" id="quantity<?php echo $photo->id; ?>">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    </div>
    <input type="hidden" name="id" class="form-control" value="<?php echo $photo->id; ?>" />
    <input type="hidden" name="hidden_title" id="title<?php echo $photo->id; ?>" class="form-control" value="<?php echo $photo->title; ?>" />
    <input type="hidden" name="hidden_price" id="price<?php echo $photo->id; ?>" class="form-control" value="<?php echo $photo->price; ?>"/>
      </div>
      <div class="mx-auto">
      <input type="submit" name="add_to_cart" id="<?php echo $photo->id; ?>" class="add_to_cart btn-sm btn btn-outline-secondary" value="Add to cart" />
      </div>
     </div>
    <?php endforeach; ?>

我正在使用带有html id元素的jquery将第二个代码加载到同一页面中，但是“添加到购物车”按钮没有响应...这就是问题所在...

还在第二个代码中，我向脚本添加了一个jquery滑块，这是if（$ total_row> 0）的目的

if($total_row > 0){
        $output .= '
         <div class="row">
        ';
      foreach($photos as $photo){ 
          $output .= '
            <div class="col-md-3 col-sm-6">
     <a href="order_review.php?id='.$photo->id.'"><img  src="'.$photo->image_path().'" class="img-thumbnail" alt="'.$photo->title.'"></a>
    <div class="caption">
    <h3 class="text-info text-center">'.$photo->title.'</h3>
    <p class="text-danger text-center price"><s>N</s>'.$photo->price.'</p>
    <div class=" mx-auto">
    <select name="quantity" class="custom-select mr-sm-2" id="quantity'.$photo->id.'">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>
    </div>
    <input type="hidden" name="id" class="form-control" value="'.$photo->id.'" />
    <input type="hidden" name="hidden_title" id="title'.$photo->id.'" class="form-control" value="'.$photo->title.'" />
    <input type="hidden" name="hidden_price" id="price'.$photo->id.'" class="form-control" value="'.$photo->price.'"/>
      </div>
      <div class="mx-auto">
      <input type="submit" name="add_to_cart" id="'.$photo->id.'" class="add_to_cart btn-sm btn btn-outline-secondary" value="Add to cart" />
      </div>
     </div>
          ';
      }
    }else{
        $output .= '
        </div>
         <h3 align="center">No product found</h3>
        ';
    }
echo $output;

有什么区别，请有人解释为什么不添加...我希望我已经很好地问了这个问题。

这是jQuery

$('.add_to_cart').click(function(){
    var product_id = $(this).attr("id");
    var product_title = $('#title'+product_id).val();   
    var product_price = $('#price'+product_id).val();
    var product_quantity = $('#quantity'+product_id).val(); 
    var action = "add";
    if(product_quantity > 0){
        $.ajax({
            url:"aon.php",
            method:"POST",
            dataType:"json",
            data:{
                product_id:product_id,
                product_title:product_title,
                product_price:product_price,
                product_quantity:product_quantity,
                action:action
            },
            success:function(data){
                $('#order_table').html(data.order_table);
                $('.badge').text(data.cart_item);
                alert("Product has been added to cart");
            }
        });
    }else{
      alert("Please enter number of quantity"); 
    }   
    });