Добавьте класс к элементу, используя jQuery после успешного вызова ajax

Question

Я пытаюсь добавить класс 'active' к <li> при нажатии <li>.Вот как выглядит структура <li><a>:

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

Поскольку к каждому <li> прикреплен идентификатор, я подумал, что это будет так просто:

$('#' + 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

Есть ли способ подождать, пока TestPartialView загрузится полностью, а затем добавить класс к правильному <li>?

Да, вы можете поставить addClass() call в callback load() call.

Также обратите внимание, что использование 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');
        });             
      }
    });
  });
});

Answer 2

Есть ли способ подождать, пока TestPartialView полностью загрузится, а затем добавить класс к правильному <li>

Да, вы просто используете load() обратный вызов, который будет вызван после полной загрузки части:

$('#table-container').load('/Projects/ProjectTable/TestPartialView',
{
    searchString: $('#searchBox').val(),
    currentPage: page,
    projectCount: result
}, function(){
    $('#' + page).addClass('active');
});