Как правильно работать с обработчиками событий jQuery?

Question

[Илья Савельев]

Всем привет, вопрос связан с jQuery, а именно с обработчиками событий.

Сразу к делу. Заранее извиняюсь за мой ломаный jQuery - не так давно начал изучать.

Представим себе на HTML-страничке определенный набор кнопок button:

1. Пациент из основной очереди
   
2. Пациент из доп/очереди (hidden)
   
3. Обслужен (hidden)
   
4. Перенаправлен (hidden)
   

И счетчик, сколько пациентов в основной очереди и в дополнительной.

Логика следующая: при клике на "пациент из основной очереди" становятся видимыми кнопки "Обслужен" и "Перенаправлен". При клике на одну из этих кнопок счетчик основной очереди уменьшается на единицу, кнопки "Обслужен" и "Перенаправлен" скрываются.

Когда счетчик основной очереди доходит по 0, становится активной кнопка "Пациент из доп/очереди", при клике на нее становятся видимыми кнопки "Обслужен" и "Перенаправлен", логика аналогична той что в абзаце выше. То есть пока одна очередь полностью не будет обслужена, вторую не возможно начать обслуживать.

Теперь к коду (сократил насколько возможно для общего понимания идеи):

function goAddButton() {  // функция по работе с доп/очередью
  disableButton('#next'); // делаем некликабельной кнопку "Следующий из основной очереди"
  $("#next-from-add").on('click', function() { // клик на  "Пригласить из доп/очереди"
      $(".script1").removeClass("hidden"); // появляются кнопки "Обслужен / Перенаправлен"
      $(".redirect-button").on('click', function() { // клик на кнопку "Перенаправлен"
          var numAdd = incrimentNumber ('span#num-add'); // пользовательская функция которая инкрементит очередь на единицу
           ......  // тут операции дополнительной очереди
           $(".script1").AddClass("hidden"); // скрываем кнопки "Обслужен / Перенаправлен"
           $('#modal-redirect-success').modal({show:true,backdrop:'static'}); // модаль с OK-месседжем
      });
  });
}

$("#next").on('click', function() { // клик на "Следующий из основной очереди"
    $(".script1").removeClass("hidden"); // появляются кнопки "Обслужен / Перенаправлен"
    $(".redirect-button").on('click', function() { // клик на кнопку "Перенаправлен"
        var numMain = incrimentNumber ('span#num-main'); // пользовательская функция которая инкрементит очередь на единицу
         ......  // тут операции основной очереди
         $(".script1").AddClass("hidden"); // скрываем кнопки "Обслужен / Перенаправлен"
         $('#modal-redirect-success').modal({show:true,backdrop:'static'}); // модаль с OK-месседжем
         if (numMain <= 0) {goAddButton()}   // если в основной очереди никого нет, то начинаем работать с доп/очередью
    });
});

Но по факту когда мы кликаем на кнопку ".redirect-button" в дополнительной очереди, выполняются все операции как из дополнительной, так и из основной очереди.

Вопрос - как сделать так, чтобы в дополнительной очереди обработчик делал только операции дополнительной очереди и не затрагивал операции основной очереди?

P.S. Если заканчивается доп/очередь, то появляется снова основная и вся логика повторяется снова, таким образом удаление обработчика через .off не представляется возможным.

Answer 1

[Dmitry Tallmange]

Рекомендую Вам, во-первых, создать некоторые абстрактные события. Затем создать некие сущности с кнопками, которые хранят внутри себя состояния и подписываются на события, а также могут их генерировать. Логику необходимо отвязать от jQuery, это всего лишь инструмент для манипуляции с DOM, а не хранитель логики, поэтому городить такие велосипеды неразумно. Стоит только представить, что произойдет, если Вы в будущем захотите добавить еще одну кнопку или еще одно состояние.

Comments

[Илья Савельев]

Я понимаю что в результате это не про jQuery) просто мне надо воплотить сий действия в HTML-шаблоне, а затем отдать на backend ребятам.

[Dmitry Tallmange]

Илья Савельев: в результате совершенно не принципиально придерживаться той или иной платформы. Зависит от задачи. Но здесь, вообще, исключительно клиентский код, не вижу необходимости отдавать это в бэкенд. С сервера Вам нужно получать (и отправлять туда) лишь число людей в очереди, а также изменение состояния.