JQuery 事件只执行一次

Question

我正在尝试为一堆按钮触发 JQuery Ajax 事件。

这是 index.php 文件中的代码：

<?php 
foreach($data as $d) {
  $myid = $d['id']; 
  $mystatus = $d['status']; 
  ?>

  <div class="input-group-prepend">
    <button id="submitbtn" type="button" class="myupdatebtn btn btn-success" data-id="<?php echo $myid; ?>" disabled>Finish Task</button></div>

    <li class="nav-item">
      <a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
        <i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
        <p>
          <?php echo $d["title"];
            if ($d['type'] == "task") { ?>
              <span id="updatemsg-<? echo $d['id'];?>" class="right badge <?php if($mystatus == "TERMINATED"){echo "badge-success";} else {echo "badge-danger";}?>"><?php setTerminated($conn, $myid)?></span>
          <?php } ?>
        </p>
      </a>
  </li> 
<?php } ?>

菜单项（标题、状态和图标）是从 MySQL 数据库中提取的。

这是带有 AJAX 调用的 JAVASCRIPT (JQUERY) 文件：

$('.myupdatebtn').on('click', function() { 
    var id = $(this).data('id'); 

    $.ajax({ 
      url: 'includes/updatestatus.php', 
      type: 'POST', 
      data: {id:id}, 
      dataType: 'html', 
      success: function(data)
      { 
        if (data) 
        { 
          $('#submitComment').attr("disabled", true); 
          $('#customComment').val("");
          $('#updatemsg-'+id).html("TERMINATED").removeClass('badge-danger').addClass('badge badge-success'); 
          console.log(id);
        } 
        else 
        { 
          $('#customContent').load("custom/static/error.html"); 
         } 
       }, 
       error: function(jqXHR, textStatus, errorThrown)
       { 
         $('#customContent').html("ERROR MSG:" + errorThrown); 
       } 
    }); 
});

这是 updatestatus.php 文件的代码：

 <?php

    include("db.php");
    $id = $_POST['id'];
    $query = "UPDATE mytable SET status='TERMINATED' WHERE id='$id'";
    mysqli_query($conn, $query);
      
    ?>

从代码中可以看出，当单击按钮时，它将被禁用并且输入将为空。问题是这段代码只运行一次，之后按钮不会更新 DATABASE 并且 DOM 也不会更新（只有在刷新并再次按下按钮后）。

有没有办法在每次迭代后终止 JQuery 事件（为每个菜单项按下按钮）并使其再次可用以执行？

Answer 1

你说你有“一堆按钮”，我在你的代码中只看到 1 个。

但是，如果您有一堆具有相同 class 但不同 id 的按钮，则此代码将起作用。

$('.myupdatebtn').each(function(){
$(this).on('click', function() { 
    var id = $(this).data('id');
    $.ajax({ 
      url: 'includes/updatestatus.php', 
      type: 'POST', 
      data: {id:id}, 
      dataType: 'html', 
      success: function(data)
      { 
        if (data) 
        { 
          $('#submitComment').attr("disabled", true); 
          $('#customComment').val("");
          $('#updatemsg-'+id).html("TERMINATED").removeClass('badge-danger').addClass('badge badge-success'); 
          console.log(id);
        } 
        else 
        { 
          $('#customContent').load("custom/static/error.html"); 
         } 
       }, 
       error: function(jqXHR, textStatus, errorThrown)
       { 
         $('#customContent').html("ERROR MSG:" + errorThrown); 
       } 
    }); 
});
})    

为按钮提供适当的ids，以便您的updatestatus.php 正常工作。

$('.mybtn').each(function(){
  $(this).click(function(){
    alert("You clicked the button with id '"+this.id+"' call ajax do whatever");
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2>Bunch of buttons right?</h2>

<button id="1" class="mybtn">btn1</button><br/>
<button id="2" class="mybtn">btn1</button><br/>
<button id="3" class="mybtn">btn1</button><br/>
<button id="4" class="mybtn">btn1</button><br/>
<button id="5" class="mybtn">btn1</button><br/>

我无法理解您所说的“有没有办法在每次迭代后终止 JQuery 事件（为每个菜单项按下按钮）并使其再次可用以执行？”，但据我所知需要一个活动的事件监听器，它会触发所有的按钮被点击？

还有一件事我注意到了，你正在使用if(data){//code} 但是什么数据？，你没有从 php 文件返回任何东西，返回一些东西。

 <?php

    include("db.php");
    $id = $_POST['id'];
    $query = "UPDATE mytable SET status='TERMINATED' WHERE id='$id'";
    if(mysqli_query($conn, $query)) echo "1";
    else echo "2";
  ?>

然后使用if(data === 1) {//do task} else if(data === 2){//Do else task}

如有任何疑问，请发表评论。