AJAX를 사용하여 HTML 요소 추가

Question

데이터베이스에서 반환 한 값에 따라 AJAX를 사용하여 li을 생성 중이며 동적으로 생성 된 li에 jQuery를 적용하려고하지만 작동하지 않습니다. 누구든지 도와 줄 수 있습니까?

내 코드

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