Đặng Duy Tâm Đặng Duy Tâm - 28 days ago 9
Ajax Question

Javascript does not work after ajax call

I'm trying to do an Ajax call to get more data on click. It hass worked at the first click, but after that I can't click the button anymore, also the data I received not apply any javascript (like bootstrap popover, lazyload img). I have placed the JS in the bottom (before the

</body>
tag) and I thought that's the problem so I'm trying to put js in the
<head>
tag but that still doesn't fix the problem.

I've found solution on stackoverflow like

$(document).on('click','.show_more',function(){
// function
});


but that doesn't fix it. This is my js:

$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'load.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.item-list').append(html);
}
});
});


sorry if my English is bad because I'm Vietnam.

Answer
clickEvent()();
function clickEvent() {
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
    type:'POST',
    url:'load.php',
    data:'id='+ID,
    success:function(html){
        $('#show_more_main'+ID).remove();
        $('.item-list').append(html);
        clickEvent();
    }
  }); 
});
}
Comments