關於jq的delegate問題

<code>//PHP
<?php
include "db.php";
if(isset($_POST["category"])){


    $category_query = "SELECT * FROM categories";


    $run_query = mysqli_query($con,$category_query); 
    echo "
<div class='nav nav-pills nav-stacked'>
    <li class='active'><a href='#'><h4>Categories</h4></a></li>
    ";

    if(mysqli_num_rows($run_query)>0){
        
        while($row = mysqli_fetch_array($run_query)){
            $cid = $row["cat_id"];
            $cat_name = $row["cat_title"];

//问题在这里
            echo "
<li><a href='#' class='category' cid='$cid'>$cat_name</a></li>
            ";
        }
        echo "</div>";
    }
}


if(isset($_POST["brand"])){
    $brand_query = "SELECT * FROM brands";
    $run_query = mysqli_query($con,$brand_query);
    echo "
<div class='nav nav-pills nav-stacked'>
    <li class='active'><a href='#'><h4>Brands</h4></a></li>
    ";

    if(mysqli_num_rows($run_query)>0){
        while($row = mysqli_fetch_array($run_query)){
            $bid = $row["brand_id"];
            $brand_name = $row["brand_title"];
            echo "
<li><a href='#'>$brand_name</a></li>
            ";
        }
        echo "</div>";
    }
}

if(isset($_POST["getProduct"])){
    $product_query =  "SELECT * FROM products ORDER BY RAND() LIMIT 0,9";
    $run_query = mysqli_query($con,$product_query);
    if(mysqli_num_rows($run_query) >0 ){
        while($row = mysqli_fetch_array($run_query)){
           $pro_id = $row['product_id'];
           $pro_cat = $row['product_cat'];
           $pro_brand = $row['product_brand'];
           $pro_title = $row['product_title'];
           $pro_price = $row['product_price'];
           $pro_image = $row['product_image'];
           echo "
             <div class='col-md-4'>
                        <div class='panel panel-info'>
                            <div class='panel-heading'>$pro_title</div>
                            <div class='panel-body'>
                                <img style='width:300px;height:300px' src='product_image/$pro_image' />
                            </div>
                            <div class='panel-heading'>$.$pro_price.00
                              <button pid='$pro_id' style='float:right' class='btn btn-danger btn-xs'>AddToCart</button>
                            </div>
                        </div>
                        </div>
           ";
        }
    }

}


?></code>

<code>//JS

 $(document).ready(function() {
    cat();
    brand();
    product();

    function cat() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    category: 1
                },
            })
            .done(function(data) {
                //console.log(data);
                $("#get_category").html(data);

            });


    }

    function brand() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    brand: 1
                },
            })
            .done(function(data) {
                //console.log(data);

                $("#get_brand").html(data);

            });


    }


    function product() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    getProduct: 1
                },
            })
            .done(function(data) {
                //console.log(data);
                $("#get_product").html(data);

            });
    }

    //使用 delegate() 方法。on不能获取
    $("body").delegate(".category", "click", function() {
        alert(123);
    })
    // $(".category").on("click", function(event) {
    //     alert(13);
    // });
})</code>

我用on的方法為什麼點擊沒反應？而delegate有？是不是因為這個class寫在php上，on不能讀取？還是怎麼樣？

回覆內容：

<code>//PHP
<?php
include "db.php";
if(isset($_POST["category"])){


    $category_query = "SELECT * FROM categories";


    $run_query = mysqli_query($con,$category_query); 
    echo "
<div class='nav nav-pills nav-stacked'>
    <li class='active'><a href='#'><h4>Categories</h4></a></li>
    ";

    if(mysqli_num_rows($run_query)>0){
        
        while($row = mysqli_fetch_array($run_query)){
            $cid = $row["cat_id"];
            $cat_name = $row["cat_title"];

//问题在这里
            echo "
<li><a href='#' class='category' cid='$cid'>$cat_name</a></li>
            ";
        }
        echo "</div>";
    }
}


if(isset($_POST["brand"])){
    $brand_query = "SELECT * FROM brands";
    $run_query = mysqli_query($con,$brand_query);
    echo "
<div class='nav nav-pills nav-stacked'>
    <li class='active'><a href='#'><h4>Brands</h4></a></li>
    ";

    if(mysqli_num_rows($run_query)>0){
        while($row = mysqli_fetch_array($run_query)){
            $bid = $row["brand_id"];
            $brand_name = $row["brand_title"];
            echo "
<li><a href='#'>$brand_name</a></li>
            ";
        }
        echo "</div>";
    }
}

if(isset($_POST["getProduct"])){
    $product_query =  "SELECT * FROM products ORDER BY RAND() LIMIT 0,9";
    $run_query = mysqli_query($con,$product_query);
    if(mysqli_num_rows($run_query) >0 ){
        while($row = mysqli_fetch_array($run_query)){
           $pro_id = $row['product_id'];
           $pro_cat = $row['product_cat'];
           $pro_brand = $row['product_brand'];
           $pro_title = $row['product_title'];
           $pro_price = $row['product_price'];
           $pro_image = $row['product_image'];
           echo "
             <div class='col-md-4'>
                        <div class='panel panel-info'>
                            <div class='panel-heading'>$pro_title</div>
                            <div class='panel-body'>
                                <img style='width:300px;height:300px' src='product_image/$pro_image' />
                            </div>
                            <div class='panel-heading'>$.$pro_price.00
                              <button pid='$pro_id' style='float:right' class='btn btn-danger btn-xs'>AddToCart</button>
                            </div>
                        </div>
                        </div>
           ";
        }
    }

}


?></code>

<code>//JS

 $(document).ready(function() {
    cat();
    brand();
    product();

    function cat() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    category: 1
                },
            })
            .done(function(data) {
                //console.log(data);
                $("#get_category").html(data);

            });


    }

    function brand() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    brand: 1
                },
            })
            .done(function(data) {
                //console.log(data);

                $("#get_brand").html(data);

            });


    }


    function product() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    getProduct: 1
                },
            })
            .done(function(data) {
                //console.log(data);
                $("#get_product").html(data);

            });
    }

    //使用 delegate() 方法。on不能获取
    $("body").delegate(".category", "click", function() {
        alert(123);
    })
    // $(".category").on("click", function(event) {
    //     alert(13);
    // });
})</code>

我用on的方法為什麼點擊沒反應？而delegate有？是不是因為這個class寫在php上，on不能讀取？還是怎麼樣？

對於動態產生的元素使用on

<code> $('body').on('click','.category' , function() {
         alert(123);
     })</code>

在你使用新 API 之前，應透過文件充分了解它的作用。