Php ajax代码不适用于第二个列表

我的代码在第一个列表中运行良好。但即使其他列表有更多列表，也不起作用。你能查一下我的密码是怎么回事吗

如果我单击signOut，它将被添加到数据库中，并从仅具有signOut值的页面中删除。第一个Div列表工作，但另一个不会响应任何内容

多谢各位 这是我的密码：

Java脚本代码：

$(function() {


$("#add").click(function(){

//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("dataid");
var outime = $(this).parents("#list").find("#outtime").val();

//Built a url to send
var info = 'id=' + del_id+ '&singout=' + outime;

 $.ajax({
   type: "POST",
   url: "signOut.php",
   data: info,
   success: function(){

   }
 });

// After success 
 $(this).parents("#list").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");      



});

});

HTML代码：

<?php
    $comments = runQuery($conn, "SELECT * FROM `civ_in_out` WHERE `out_time` = 'null'");
    //print_r($comments) ;

    if(!empty($comments)) {    
    foreach($comments as $k=>$v) {

              ?>              
              <div id="list">
                <div class="form-group">
                  <div class="form-row">
                    <div class="col-md-3">
                      <input class="form-control" type="text" name="name" value="<?php echo $comments[$k]['name']; ?>" disabled>
                    </div>
                    <div class="col-md-3">
                      <input class="form-control" type="time" name="signIn" value="<?php echo $comments[$k]['in_time']; ?>" disabled>
                    </div>
                    <div class="col-md-3">
                      <input class="form-control" id="outtime" type="time" name="singOut">
                      <input class="form-control" id="id" type="hidden" name="id" value="<?php echo $comments[$k]['id']; ?>">
                    </div>
                    <div class="col-md-3">
                    <a class="btn btn-primary btn-block"  dataid="<?php echo $comments[$k]['id']; ?>" id="add" >Sign Out</a>

                    </div>
                  </div>
                </div>
              </div>
  <?php

        } }
  ?>

---

问题是您正在重复列表id和所有其他元素id，因此jQuery调用和事件绑定将始终引用在HTML上找到的第一个id

Id在html上必须是唯一的

您可以更改代码以使用类名，例如：

$(function() {
  $(".add").click(function(){

    //Save the link in a variable called element
    var element = $(this);

    //Find the id of the link that was clicked
    var del_id = element.attr("dataid");
    var outime = $(this).parents(".list").find(".outtime").val();

    //Built a url to send
    var info = 'id=' + del_id+ '&singout=' + outime;

    $.ajax({
       type: "POST",
       url: "signOut.php",
       data: info,
       success: function(){}
    });

    // After success 
    $(this).parents(".list").animate({ backgroundColor: "#fbc7c7" }, "fast").animate({ opacity: "hide" }, "slow");

  });
});

HTML/PHP：

<?php
$comments = runQuery($conn, "SELECT * FROM `civ_in_out` WHERE `out_time` = 'null'");
//print_r($comments) ;

if(!empty($comments)) {    
foreach($comments as $k=>$v) {

          ?>              
          <div class="list">
            <div class="form-group">
              <div class="form-row">
                <div class="col-md-3">
                  <input class="form-control" type="text" name="name[]" value="<?php echo $comments[$k]['name']; ?>" disabled>
                </div>
                <div class="col-md-3">
                  <input class="form-control" type="time" name="signIn[]" value="<?php echo $comments[$k]['in_time']; ?>" disabled>
                </div>
                <div class="col-md-3">
                  <input class="form-control outtime" id="outtime-<?=$k?>" type="time" name="singOut[]">
                  <input class="form-control" id="id-<?=$k?>" type="hidden" name="id[]" value="<?php echo $comments[$k]['id']; ?>">
                </div>
                <div class="col-md-3">
                <a class="btn btn-primary btn-block add"  dataid="<?php echo $comments[$k]['id']; ?>>Sign Out</a>

                </div>
              </div>
            </div>
          </div>
<?php

    } }
?>

---

您可以更改
$（“#添加”）。单击（function（）
到
$（document）。在（'click'，“#add'，function（）
上，您正在通过
获取http请求发送数据，并使用
$\u POST
检索数据。我也尝试使用POST方法。第一个方法很好，另一个则不起作用
<?php
$comments = runQuery($conn, "SELECT * FROM `civ_in_out` WHERE `out_time` = 'null'");
//print_r($comments) ;

if(!empty($comments)) {    
foreach($comments as $k=>$v) {

          ?>              
          <div class="list">
            <div class="form-group">
              <div class="form-row">
                <div class="col-md-3">
                  <input class="form-control" type="text" name="name[]" value="<?php echo $comments[$k]['name']; ?>" disabled>
                </div>
                <div class="col-md-3">
                  <input class="form-control" type="time" name="signIn[]" value="<?php echo $comments[$k]['in_time']; ?>" disabled>
                </div>
                <div class="col-md-3">
                  <input class="form-control outtime" id="outtime-<?=$k?>" type="time" name="singOut[]">
                  <input class="form-control" id="id-<?=$k?>" type="hidden" name="id[]" value="<?php echo $comments[$k]['id']; ?>">
                </div>
                <div class="col-md-3">
                <a class="btn btn-primary btn-block add"  dataid="<?php echo $comments[$k]['id']; ?>>Sign Out</a>

                </div>
              </div>
            </div>
          </div>
<?php

    } }
?>