Ajouter un élément HTML en utilisant AJAX

Question

Je génère un li en utilisant AJAX en fonction de la valeur renvoyée par la base de données et j'essaie d'appliquer jQuery au li généré dynamiquement, mais cela ne fonctionne pas. Quelqu'un peut-il aider?

Mon code est

$('.chkbox1').change(function(){ 
     if($(this).is(':checked')) 
     { 
     var grpid=this.getAttribute('id') 
     //alert(grpid); 
     $.ajax({ 

    type:"POST", 
    url:"<?php print $this->Url ?>index.php/presentation/multimedia/getusers?grpid="+grpid, 
    data:"grpid="+grpid, 
    success:function(response){ 
       var data=jQuery.parseJSON(response); 
       var str=""; 
       //alert(data[0]['first_name']); 
       for(var i=0;i<data.length;i++) 
       { 
        str=str+"<div class='img_block'><ul><li id='"+i+"'><img src='<?php print BASE_URL?>libs/publish_cart/product_img/1.jpg' class='items' height='80' alt='' /><br clear='all' /> <input type='checkbox' id='"+i+"' class='chkbox'/><div class='item_name'>"+data[i]['first_name']+"</div></li></ul> </div>"; 
        $(".user").html(str); 


       } 


} 

    }); 

Le code pour le li chkbox est ci-dessous. Je le veux pour que, en cliquant sur la case, la valeur soit ajoutée au panier mais rien ne se passe. Si j'écris le code li statique, alors cela fonctionne.

var Arrays=new Array(); 




      $('.chkbox').change(function(){ 
      if($(this).is(':checked')) 
      { 

     var thisID = $(this).attr('id'); 

     var itemname = $(this).parent().find('.item_name').html(); 
     var itemprice = 12; 

     if(include(Arrays,thisID)) 
     { 
      var price = $('#each-'+thisID).children(".shopp-price").find('em').html(); 
      var quantity = $('#each-'+thisID).children(".shopp-quantity").html(); 
      quantity = parseInt(quantity)+parseInt(1); 

      var total = parseInt(itemprice)*parseInt(quantity); 

      $('#each-'+thisID).children(".shopp-price").find('em').html(total); 
      $('#each-'+thisID).children(".shopp-quantity").html(quantity); 

      var prev_charges = $('.cart-total span').html(); 
      prev_charges = parseInt(prev_charges)-parseInt(price); 

      prev_charges = parseInt(prev_charges)+parseInt(total); 
      $('.cart-total span').html(prev_charges); 

      $('#total-hidden-charges').val(prev_charges); 
     } 
     else 
     { 
      Arrays.push(thisID); 

      var prev_charges = $('.cart-total span').html(); 
      prev_charges = parseInt(prev_charges)+parseInt(itemprice); 

      $('.cart-total span').html(prev_charges); 
      $('#total-hidden-charges').val(prev_charges); 

      var Height = $('#cart_wrapper').height(); 
      $('#cart_wrapper').css({height:Height+parseInt(45)}); 

      $('#cart_wrapper .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+'abc'+'</em></div><span class="shopp-quantity">1</span><img src="<?php print BASE_URL?>libs/publish_cart/remove.png" class="remove" /><br class="all" /></div>'); 

     } 
       } 




    }); 

Answer 1

Vous devez lier les événements de clic après l'ajout dynamique de code HTML. Faites-le comme suit:

$('.chkbox').on("change", chkboxChange); 

function chkboxChange() { 
    //place your code from "$('.chkbox').change(function(){" here; 
} 

Après la demande ajax dans un rappel de succès faire:

success:function(response){ 
//your logic 
    $('.chkbox').off("change").on("change", chkboxChange); //bind event handlers 
}