Ajax请求后的jQuery

Question

I made an ajax request that replaces the html in my web page. Now I have to "listen" into the button replaced with ajax (".button2"). I know that ajax works with asynchronous calls, so my source-page is not changed after the ajax call. This is my code.

  $(document).ready(function(){

  $(".button").on("click", function(){
    var product = $(this).parent().parent();
    var product_id = product.children(":first").text();
    var quantity = product.find(".selectBoxCat :selected").text();
    Cookies.set(product_id, quantity, {expires: 1});

    $.ajax({
     url: "/prog/php/updateCart.php",
     dataType: "html",
     cache: false,
     success: function(data) {
       $(".shopping-cart").replaceWith(data);
       //update the cart
       $(".badge").text(Object.keys(Cookies.get()).length);
     }
   });
  });



 $(".button2").on("click", function(){
    alert("success"); //just a test
 });  
});

This code doesn't works for me. Button2 is the button added into the web-page after the ajax call. How can I listen this button?

Answer 1

You declare the

$(".button2").on("click", function(){
 alert("success"); //just a test
}); 

When this button doesn't exists, so the event is not blind. Try this:

$(document).ready(function(){

$(".button").on("click", function(){
 var product = $(this).parent().parent();
 var product_id = product.children(":first").text();
 var quantity = product.find(".selectBoxCat :selected").text();
 Cookies.set(product_id, quantity, {expires: 1});

 $.ajax({
  url: "/prog/php/updateCart.php",
  dataType: "html",
  cache: false,
  success: function(data) {
    $(".shopping-cart").replaceWith(data);
    //update the cart
    $(".badge").text(Object.keys(Cookies.get()).length);

    $(".button2").on("click", function(){
     alert("success"); //just a test
    });
   }
  });
 });


});

Answer 2

It's a case of Event Delegation : your event listener doesn't work because there is no .button2 to attach it to at the moment you run that sentence.

$(document).on("click", ".button2", function(){
    alert("success"); //just a test
});

This way the event registers at the document level, but triggers on .button2 . It would be more optimal anyway to use another element (maybe the surrounding div), instead of document, as the parent.