.loaddata를 사용한 후 함수를 트리거하는 방법

Question

.loaddata 함수로로드 된 단추에서 jquery 함수를 실행할 수없는 이유가 궁금합니다.

<div id="products"></div> 

<script> 
$(document).ready(function(event) { 
    loadData(1,'default'); 
}); 

function loadData(page,type){ 
    var base = '<?php echo $sr_class->baseURL();?>'; 
    $.ajax 
    ({ 
     type: "GET", 
     url: base+"includes/module/loadProduct.php", 
     data: {page:page,type:type}, 
     success: function(msg) 
     { 
      console.info(msg); 
      $("#products").html(msg); 
     } 
    }); 
} 
$('.addcart').click(function(e){ 
    e.preventDefault(); 
    var proid = $(this).attr('proid'); 
    var base = '<?php echo $sr_class->baseURL();?>'; 
    $.post(base+'includes/module/addtocart.php',{p_id:proid, p_qty:1},function(result){ 
     location.reload(); 
    }) 
}); 

</script> 

loadData 기능에서 'MSG'수익률은 다음과 같습니다 내가 버튼을 클릭하면이 기능을 실행하지 못했습니다

<p><a proid="ABCD1001" class="btn btn-success addcart" role="button"> ABCD1001</a></p> 

.

Answer 1

.on() 대신 .click()을 사용하고 있기 때문입니다. 사용중인 click() 바인딩을 "직접"바인딩이라고하며, 이미 존재하는 요소에만 핸들러를 연결합니다. 앞으로 생성되는 요소에 바인딩되지 않습니다. 이렇게하려면 on()을 사용하여 "위임 된"바인딩을 만들어야합니다. documentation of .on()에서

:

위임 된 사건은 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수있는 장점이 있습니다.

그래서 이런 .on()와 .addcart 요소를 결합 : HTML 코드는 dynamicaly로드

$(document).on('click','.addcart',function(e){ 
    e.preventDefault(); 
    var proid = $(this).attr('proid'); 

    $.post('<?php echo $sr_class->baseURL();?>includes/module/addtocart.php',{p_id:proid, p_qty:1},function(result){ 
     location.reload(); 
    }) 
});