I'm trying to use jQuery
to add a click
function to a list item. I had this method working using JS and onClick()
, however I am trying to bring the code up to date with using jQuery
. So my list has the following structure:
<ul id="paginationList" class="pagination">
<li id="1" class="page-item disabled">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li id="2" class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
The jQuery
function is on the document.read function:
$(function () {
$('ul.pagination li.page-item').click(function () {
var $li = $(this);
$.ajax({
type: 'GET',
url: '/Projects/ProjectTable/CountProjects',
data: { searchString: $('#searchBox').val() },
success: function(result) {
$('#table-container').load('/Projects/ProjectTable/TestPartialView',
{
searchString: $('#searchBox').val(),
currentPage: page,
projectCount: result
}, function() {
$li.addClass('active');
});
}
});
});
getTable();
});
getTable()
is being executed, however when I click on any <li>
the method is not called. I have tried removing ul.pagination
from the .click
call but again that has had no impact.
What do I need to change so that the <li>
have a .click
method on each of them?
I have checked the console and there are no errors being reported at all.