Question

我正在使用Ajax发出POST请求，以检索我在网站上展示的10种产品的星级评分。

我通过php循环建立页面的请求是：

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选择器的正确方法是什么？

Answer 1

而不是这样做：

$(".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()。

Answer 2

我找到了问题的答案。我遇到的问题是 js bubbling 导致事件执行10次。

通过添加一行来解决

ev.stopImmediatePropagation();

进入

$(".rating").on("change", function(ev, data){  
    saveRating($(this).parent().attr("id"), data.to, data.to, "25px");
});

Ajax请求返回Jquery中使用的元素

2 个答案: