修复javascript中的变量增量

Question

I'm coding a wordpress theme and I want to increment a load more button. I'm not using wordpress always and this is the first time I've this problem with a javascript variable. The variable pull_page in fact will not increment and every time the script will run it will fetch only two pages. Is there any error in the code, and how I can fix it?

$('#load-more').on('click', function(e){
  e.preventDefault();
  var pull_page = 1;
  var jsonFlag = true;

  if(jsonFlag){
    pull_page++;

    $.getJSON("/beta/wp-json/portfolio/all-posts?page=" + pull_page, function(data){
        if(data.length){
        $.each(data, function(i, item){
          var html = '<div class="card">';
          html += '<a href="'+ item.permalink +'">';
          html += '<img class="card-img-top w-100" src="'+ item.featured_img_src +'" id="case-studies" />';
          html += '<div class="overlay"><h4 class="text-center" id="client-name">'+ item.title +'</h4></div>';
          html += '</a>';
          html += '</div>';
          $('body').find('.card-columns')
          .append(html);
        });
      }
      else{
        jsonFlag = false;
      }
    }).done(function(data){
      if(data.length >= 4){
        jsonFlag = true;
      }
      else{
        jsonFlag = false;
      }
    });
    }

  }); // end load more

Answer 1

You're resetting pull_page to 1 each and every time the load more button is clicked.

Move it outside.

var pull_page = 1;
$('#load-more').on('click', function(e) {
    ...