Javascript does not work after ajax call
Question
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.
2 answers
solution1
1 2016-11-07 14:17:57
Just make sure where the problem is checking if the button event and the ajax request work using console.log() .
$(document).on('click','.show_more',function(){
console.log("my button click works");
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'load.php',
data:'id='+ID,
success:function(html){
console.log("my ajax request was successful")
$('#show_more_main'+ID).remove();
$('.item-list').append(html);
}
});
});
solution2
0 ACCPTED 2016-11-07 14:13:45
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();
}
});
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.