Как вызвать функцию после использования .loaddata

Question

Мне интересно, почему я не могу выполнить функцию jquery на кнопке, загруженной функцией .loaddata.

<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> 

возвращение 'Msg' из функции LoadData является:

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

Когда я нажимаю кнопку, он не выполнял функцию.

Answer 1

Это потому, что вы используете .click() вместо .on(). Используемая вами привязка click() называется «прямой» привязкой, которая привязывает обработчик только к уже существующим элементам. Он не будет привязан к элементам, созданным в будущем. Для этого вам нужно будет создать «делегированную» привязку, используя on().

От documentation of .on():

делегированного событие имеет то преимущество, что они могут обрабатывать событие от элементов-потомков, которые добавляются к документу в более позднее время.

Так связать .addcart элемент с .on(), как это:

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