Добавить элемент HTML, используя AJAX

Question

Я генерирую li с использованием AJAX в зависимости от значения, возвращаемого базой данных, и пытаюсь применить jQuery к динамически генерируемому li, но он не работает. Может ли кто-нибудь помочь?

Мой код

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


       } 


} 

    }); 

Код для li chkbox ниже. Я хочу, чтобы при щелчке на флажке значение добавлено в корзину, но ничего не происходит. Если я напишу статический код li, то он будет работать.

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

Вы щелкаете события щелчка после добавления html динамически. Делают это следующим образом:

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

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

После АЯКС запроса в успех обратного вызова сделать:

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