Pierre Pierre - 2 months ago 13
Ajax Question

Jquery with dynamic list from Ajax

I have a list (when the page is loaded):

<ul class="pagination" id="pagination">
//content load with ajax
</ul>


The dynamic content is loaded from an Ajax request :

success: function(data){
if(data.status == "success"){
$('#pagination').html(data.pagination);
}
}


and then the ul element with "id pagination" become per example (can be more than only 2 page):

<ul class="pagination" id="pagination">
<li class="active" value="1"><a href="#">1</a></li>
<li value="2"><a href="#">2</a></li>
<li class="next"><a href="#" class="mdi mdi-chevron-right"</a</li>
</ul>


I want then to get the "li" clicked and get his value, so far I have done this but it doesn't work.

$(document).ready(function() {
$('#pagination li').on('click', function(e) {
console.log("Page : "+$(this).val());
});
});


Thanks in advance

Answer

Move this code

$('#pagination li').on('click', function(e) {
  console.log("Page : "+$(this).val());
});

to the success function of the ajax call,
because it is now excute just after the page load and before the ajax request done, so you have to do after your ajax request and rendering the new html code