Change button text after click for ajax load more while loading

Question

Today I am working on an Ajax load more for my WordPress posts. The function is working and fetching my content. But I am wondering how I am able to add a text change to my button while it is loading.

This is my script:

var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': blog.security
        };

        $.post(blog.ajaxurl, data, function(response) {
            if($.trim(response) != '') {
                $('#blog-loop .row .container .row').append(response);
                page++;
            } else {
                $('.loadmore').hide();
            }
        });
    });
});

Could anyone explain to me where I need to look to get this done?

Thank you in advance.

Answer 1

Like this:

var page = 2;
$(function() {
  $('body').on('click', '.loadmore', function() {
    const $but = $(this); // save the clicked button
    $but.text("Loading..."); // change the text
    var data = {
      'action': 'load_posts_by_ajax',
      'page': page,
      'security': blog.security
    };

    $.post(blog.ajaxurl, data, function(response) {
      $but.text("Load more..."); // reset the text
      if ($.trim(response) != '') {
        $('#blog-loop .row .container .row').append(response);
        page++;
      } else {
        $but.hide();
      }
    });
  });
});