<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 "";
}
}
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="max-width:90%" src="product_image/%24pro_image" alt="关于jq的delegate问题" >
</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 "";
}
}
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="max-width:90%" src="product_image/%24pro_image" alt="关于jq的delegate问题" >
</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 之前，应通过文档充分了解它的作用。
