Question

我的代码适用于第一个列表。但如果有更多列表，甚至不工作甚至其他列表。能否请您查看我的代码发生了什么。

如果我点击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 COde：

<?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

        } }
  ?>

signOut.php

include 'connect.php';

$data=$_POST['serialize'];
echo $id  = $data['id']; 
echo $outtime  =    $data['singout'];

$sql = "UPDATE `civ_in_out` SET `out_time`='$outtime' WHERE id = '$id'";

mysqli_query($conn, $sql);

Answer 1

问题是你正在重复列表id和所有其他元素id，所以jQuery调用和事件绑定将始终引用HTML上找到的第一个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

    } }
?>

Answer 2

您可以将$("#add").click(function()更改为$(document).on('click', '#add', function()

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

2 个答案: