javascript - jQuery .click 方法不会为列表项触发

Question

我正在尝试使用jQuery添加click功能到列表项。我有这个方法使用 JS 和 onClick() ，但是我试图使用 jQuery 使代码保持最新。所以我的列表具有以下结构:

<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>

jQuery函数在document.read函数上:

$(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()正在执行，但是当我单击任何 <li> 时该方法未被调用。我尝试删除 ul.pagination来自.click再次调用，但没有产生任何影响。

我需要更改什么才能使<li>有一个.click他们每个人的方法？

我检查了控制台，没有报告任何错误。

Answer 1

您的代码存在一些问题。 看来你永远不会删除“disabled”类，即使你添加了“active”类(但也许这就是你想要的)，并且你没有使用 event delegation所以也许你的事件在 <li> 之前绑定(bind)元素已创建。

试试这个:

$('.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>

这是相同的代码，以更容易理解的方式编写(恕我直言)

$(()=>{
    $('.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();
});