floydman-89
@floydman-89
В постоянном изучении...

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

Всем привет, вопрос связан с 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 не представляется возможным.
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
p00h
@p00h
Фехтовальщик-стропальщик
Рекомендую Вам, во-первых, создать некоторые абстрактные события. Затем создать некие сущности с кнопками, которые хранят внутри себя состояния и подписываются на события, а также могут их генерировать. Логику необходимо отвязать от jQuery, это всего лишь инструмент для манипуляции с DOM, а не хранитель логики, поэтому городить такие велосипеды неразумно. Стоит только представить, что произойдет, если Вы в будущем захотите добавить еще одну кнопку или еще одно состояние.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы