Почему эта переменная не обновляется?

Question

В документе .ready () у меня есть:

$('#menu_indicator').append('<p>' + currPage + ' / ' + pageLimit + '</p>');

pageLimit - это всегда одно число, которое не изменяется во всем коде. У меня так, что когда пользователь нажимает кнопку, он меняет currPage на другой номер. (этой части нет в document.ready ();)

Почему он не обновляет его в индикаторе? Есть идеи, как это исправить?

Спасибо

Answer 1

Демо для кода ниже: http://jsbin.com/oruqa3

HTML :

<input type="button" value="click" />
<div id="menu"></div>

JavaScript :

var currPage = 1, pageLimit = 20;
 $(function() {
  $('input[type=button]').click(function() {
   if(currPage <=pageLimit) {
    call();
    currPage++;
   } 
  }); 
 });


 var call = function() {
   $('#menu').html('<p>' + currPage + ' / ' + pageLimit + '</p>');
  }

Answer 2

Причина, по которой ваш код не работает так, как вы ожидаете, заключается в том, что вы добавляете его только один раз, он не присоединяет «живой» обработчик или что-то в этом роде.

Если вы хотите, чтобы индикатор менялся каждый раз, когда вы устанавливаете новое значение для currPage, я бы построил такую ​​функцию:

function setCurrentPage(page) {
    currPage = page;

    $("#menu_indicator p").html(currPage + " / " + pageLimit);
}

Это, конечно, при условии, что currPage и pageLimit объявлены в глобальной области видимости