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}

如有任何疑問，請發表評論。