[英]Ajax request to return element used in Jquery
我正在使用Ajax发出POST请求,以检索我在网站上展示的10种产品的星级评分。
我通过php循环构建页面的请求是10次:
function returnRating($id) {
$.ajax({
url: "returnRating.php",
type: 'POST',
data: {
id: $id
},
success:function(response){
$("#sp"+id).html(response); <- replace html for span element for each of the products
}
});
}
ajax Php文件(“returnRating.php”)包含连接到数据库并为星级评级创建html代码的函数:
<?php
include('db.class.php');
$bdd = new db();
$id = $_POST['id'];
function starBar($numStar, $mediaId, $starWidth) {
///Retrieving the rating, creating star elements to put in span for each product. Rating element class is .rating
return $starBar;
}
echo starBar(5, $id, 25);
?>
要与星级评分进行交互,我使用的是Jquery脚本:
<script>
$(document).ready(function() {
$(".rating").on("change", function(ev, data){ saveRating($(this).parent().attr("id"), data.to, data.to, "25px"); <- activate script saving the new rating
});
});
</script>
我的问题是 - 我应该把保存脚本放在哪里? 当我把它放在主页面时,选择器根本不起作用。 我把它放在我通过Ajax请求的returnRating.php文件中,它似乎正在工作,因为它激活了函数saveRating。 然而,每次点击一个星级评分时,它都会做10次。
在php ajax请求生成的内容上使用Jquery选择器的正确方法是什么?
而不是这样做:
$(".rating").on("change", function(ev, data){
saveRating($(this).parent().attr("id"), data.to, data.to, "25px");
});
做这个:
$(document).on("change", ".rating", function(ev, data) {
saveRating($(this).parent().attr("id"), data.to, data.to, "25px");
}
有关.on
更多信息: .on() 。
我找到了问题的答案。 我遇到的问题是js bubbling导致事件执行10次。
通过添加一行来解决
ev.stopImmediatePropagation();
成
$(".rating").on("change", function(ev, data){
saveRating($(this).parent().attr("id"), data.to, data.to, "25px");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.