JQuery, кнопка ajax не работает

Question

У меня есть кнопка, которая передает данные через ajax. Затем, когда у меня есть это изменение на другую кнопку, которая затем создает цикл между двумя кнопками.

Однако вторая кнопка не может быть нажата. Любая идея почему? Heres мой код:

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

Answer 1

Поскольку ваша кнопка динамически генерируется из АЯКС ответ, вы должны использовать .on(), как:

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

Answer 2

Потому что вы пропустили две вещи:

1. Включить на click click для отслеживания нажатия кнопки button.check *.
2. Новый .checkout кнопка, которую вы добавляете внутри выхода .checkin, используя html(). Это должно быть заменено.

Здесь я описываю:

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