I have a button that submit data via ajax. Then when I have it change to a different button which then creates a cycle between the two buttons.

However the second button isn't click-able. Any idea why? Heres my code:

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

I have a button that submit data via ajax. Then when I have it change to a different button which then creates a cycle between the two buttons.

However the second button isn't click-able. Any idea why? Heres my code:

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

• javascript
• jquery
• html
• ajax

• Search for delegated event handlers. Or look at api.jquery./on – ahren Commented Nov 7, 2013 at 3:26

2 Answers 2

Since your button is dynamically generated from ajax response, you need to use .on(), like:

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

Because you missed two things:

1. Enable on click event for document to monitor button.check* is clicked.
2. New .checkout button you are appending inside exiting .checkin button using html(). This should be replaced.

Here I'm describing:

$(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) {
  ...
});