jQuery .click method not firing for list items

Question

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.

It's working for me. Are you sure this is the state of the DOM when that code executes? Or are you dynamically changing the DOM somewhere? — David, Jun 08 '18 at 12:32
@David I am rendering a partial view from ASP.NET Core so maybe this is causing an issue. — CBreeze, Jun 08 '18 at 12:37
@CBreeze: The server-side technology isn't really relevant here. Ultimately the question is whether or not you're dynamically modifying the DOM client-side. For example, by making an AJAX request to get new data and render new elements. — David, Jun 08 '18 at 12:39

vsync · Answer 1 · 2018-06-08T12:50:13.403

There are a few problems with your code. it seems you never remove the "disabled" class, even when you add the "active" one (but maybe that is what you want), and you are not using event delegation so maybe your even was binding before the <li> elements were created.

Try this:

$('.pagination').on("click", ".page-item", function(){
      console.log(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="paginationList" class="pagination">
   <li id="1" class="page-item disabled">
      <a class="page-link">Previous</a>
   </li>
   <li class="page-item">
       <a class="page-link">1</a>
   </li>
   <li id="2" class="page-item">
       <a class="page-link">Next</a>
    </li>
</ul>

Here is the same code, written in a more understandable way (IMHO)

$(()=>{
    $('.pagination').on("click", ".page-item", onPaginationItemClick);

    function onPaginationItemClick(){
        var listItem = this,

            // it's nicer to assign jQuery ajax calls to a variable, so it could be aborted if needed
            CountProjects_REQ = $.ajax({
                type : 'GET',
                url  : '/Projects/ProjectTable/CountProjects',
                data : { searchString: $('#searchBox').val() }
            });

         // using the "done()" method on the jQuery XHR object. do not use "success", it is the old and aweful way
        CountProjects_REQ.done(RES => {
            $('#table-container').load('/Projects/ProjectTable/TestPartialView', {
                searchString : $('#searchBox').val(),
                currentPage  : page,
                projectCount : RES
            }, ()=>{
                listItem.classList.add('active');
            }); 
        })
    };

    // I have no idea what this part is for...I'll just leave it here
    getTable();
});

score 0 · Answer 2 · answered Jun 08 '18 at 12:32

$('ul.pagination li.page-item') works for the click event:

$('ul.pagination li.page-item').click(function () {
  console.log('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

If you are adding the li dynamically then you can better use,

$(document).on('click', 'ul.pagination li.page-item', function () {
  console.log('clicked');
});

jQuery .click method not firing for list items

2 Answers2

Try this:

Here is the same code, written in a more understandable way (IMHO)