javascript - 在成功调用 ajax 后使用 jQuery 将类添加到元素

Question

我正在尝试添加 'active'类到 <li>当<li>被点击。 <li><a>的结构是这样的看起来像:

<li onclick="paginationChange(2)" id="2" class="page-item">
    <a class="page-link" href="#">2</a>
</li>

作为每个 <li>有一个 id 附加到它我认为它会像这样简单:

$('#' + page).addClass('active');

在哪里page是传递给 onclick 的数字方法。然而，使这变得复杂的是我正在使用 PartialView在 ajax 成功时加载称呼。所以整个 onclick方法如下所示:

function paginationChange(page) {
    $.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
                }); 
            $('#' + page).addClass('active');
        }
    });
}

我试过在 addClass 周围移动打电话，因为我认为问题可能是 PartialView在我添加类后呈现，因此呈现没有类的元素。

有没有办法让我等到 TestPartialView已完整加载，然后将类添加到正确的 <li> ？

编辑:

<ul id="paginationList" class="pagination">
   <li id="1" class="page-item">
      <a class="page-link" href="#">1</a>
   </li>
</ul>

新js:

$('#paginationList li.page-item').click(function () {
    console.log('test');
    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');
                }); 
        }
    });
});

Answer 1

Is there a way I can wait until the TestPartialView has loaded in its entirety and then add the class to the correct <li>?

是的，你可以把addClass()调用 load() 的回调打电话。

另请注意，使用 on*事件处理程序非常过时。当您使用 jQuery 时，您可以使用它向 li 添加不显眼的事件处理程序。这样就无需传递硬编码参数，因为您已经有了对引发事件的元素的引用。试试这个:

<ul>
  <li class="page-item">
    <a class="page-link" href="#">2</a>
  </li>
</ul>

$(function() {
  $('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() {   
          // this argument is a function to be executed once the content has been loaded,
          // similar to the success handler of $.ajax
          $li.addClass('active');
        });             
      }
    });
  });
});