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); 
       } 
    }); 
});
})    

为按钮提供适当的id ，以便您的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}

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