php - 只能使用 Ajax 删除第一行

Question

我有一个页面可以打印 mysql 表中的行。我正在尝试创建一个允许用户删除行的ajax 表单，但由于某种原因，我似乎只能让它删除打印出来的最上面一行。 我只包含了此处可能需要的脚本，并省略了数据库查询(效果很好)。Firebug 仅在我单击结果的顶行时显示正在发布的表单，任何其他行都不执行任何操作。谁能告诉我出了什么问题吗？谢谢

My_reviews.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>

<script type="text/javascript">
//Delete Review
$(document).ready(function(){
$("#deleteReview").click(function (e) {
        e.preventDefault();


 var username=$("#username").val();
 var film_id=$("#film_id").val();
 var id=$("#id").val();


 $.post('ajax_deleteReview.php', {username: username, film_id:    film_id, id: id},
 function(data){
$("#message").html(data);
 $("#message").hide();
$("#message").fadeIn(500);
$("#message").fadeOut(2500); 
});
return false;
});
});
</script>
</head>

<div class="container">
<div id="message"></div>
<?php
  $sql = "SELECT * FROM user_reviews WHERE username='$username' ORDER BY DATE desc";
$result = $db_conx->query($sql);
 while($row = $result->fetch_assoc()) {
$id = $row['id']; 
$film_id = $row['film_id']; 
$review = $row['review']; 
$movie = $tmdb->getMovie ($film_id);

echo ' 
<div class="row">
        <div class="col-md-1">

<a href="film_info.php?film_id='. $movie->getID() .'"><img id="image1" src="'. $tmdb->getImageURL('w150') . $movie->getPoster() .'" width="80" /></a>
<p>
</p>
</div>
  <div class="col-md-4">
          <h3>
             ' . $movie->getTitle() .'  
          </h3>';
echo'
          <p>
            '.$review. '
          </p>

<form>
    <input type="hidden" id="username" name="username" value="'. $username.'">
<input type="hidden" id="film_id" name="film_id" value="'.$film_id .'">
<input type="hidden" id="id" name="id" value="'.$id .'">
<button type="submit" id="deleteReview" class="btn btn-danger btn-xs pull-right">delete</button>
</form>
        </div>
        <div class="col-md-7">
        </div>
      </div>';

}
?>

    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
      </script>
    </div>
    </body>
    </html>

ajax_deleteReview.php

<?php
//include db configuration file
include_once("ajax_review/config.php");
//Configure and Connect to the Databse
 $username=$_POST['username'];
 $film_id=$_POST['film_id'];
 $id=$_POST['id'];
//Delete Data from Database
 $delete_row = $mysqli->query("DELETE * FROM `user_reviews` WHERE     id='$id' AND username='$username' AND film_id='$film_id' LIMIT 1");
if($delete_row){
echo '<img src="images/tick_large.png"/>';
 }
 else{ echo "An error occurred!"; }
 ?>

Answer 1

输入中有重复的 ID，因此 jQuery 返回第一个出现的输入。
您可以将 film_id、id 和 film_name 添加到 <a>与数据属性链接，然后使用 jquery 读取。
ajax请求的JavaScript函数需要分配给该类:

$(".deleteReview").click(function (e) {...

和

<a class="deleteReview"....

这样您就可以消除 HTML 代码中的重复 ID。