Jquery，ajax 按钮不起作用

Jquery, ajax button not working

本文关键字：不起作用 按钮 ajax Jquery      更新时间：2023-09-26

我有一个通过ajax提交数据的按钮。然后，当我将其更改为不同的按钮时，然后在两个按钮之间创建一个循环。

但是，第二个按钮不可单击。知道为什么吗？这是我的代码：

<div class="<?PHP echo $value['id'];?>"><button class="checkin" id="<?PHP echo $value['id'];?>">Checkin</button></div>
<script type="text/javascript">
$(function() { // wrap inside the jquery ready() function

//Attach an onclick handler to each of your buttons that are meant to "approve"
$(".checkin").click(function(){
   //Get the ID of the button that was clicked on
   var id_of_item_to_approve = $(this).attr("id");

   $.ajax({
      url: "checkin_user.php", //This is the page where you will handle your SQL insert
      type: "POST",
      data: "eventid=<?PHP echo $eventId;?>" + "&id=" + id_of_item_to_approve, //The data your sending to some-page.php
      success: function(){
          alert("AJAX request was successfull");
          $("." + id_of_item_to_approve).html('<button class="checkout" id="' + id_of_item_to_approve + '">Check Out</button>');
      },
      error:function(){
          alert("AJAX request was a failure");
      }   
    });
});
//Attach an onclick handler to each of your buttons that are meant to "approve"
$(".checkout").click(function(){
   //Get the ID of the button that was clicked on
   var id_of_item_to_approve = $(this).attr("id");

   $.ajax({
      url: "checkin_user.php", //This is the page where you will handle your SQL insert
      type: "POST",
      data: "checkout=1&eventid=<?PHP echo $eventId;?>" + "&id=" + id_of_item_to_approve, //The data your sending to some-page.php
      success: function(){
          alert("AJAX request was successfull");
          $("." + id_of_item_to_approve).html('<button class="checkin" id="'+ id_of_item_to_approve +'">Check In</button>');
      },
      error:function(){
          alert("AJAX request was a failure");
      }   
    });
});
});
</script>

由于您的按钮是从 ajax 响应动态生成的，因此您需要使用 .on（），例如：

$(document).on('click', '.checkout', function() {
    //rest of your code here
});

因为你错过了两件事：

  1. 为要监视的文档按钮启用单击时事件。单击复选*。
  2. 您追加在内部的新.checkout按钮使用 html() 退出.checkin按钮。这应该被替换。

在这里我描述的是： 

$(document).on('click', '.checkin', function(e) {
  e.preventDefault();
  // Ajax block
  $("#" + id_of_item_to_approve).replace('<button class="checkout" id="' + id_of_item_to_approve + '">Check Out</button>');
  // End Ajax block
});
$(document).on('click', '.checkout', function(e) {
  ...
});
相关文章：