Почему не работает обработчик события клик на кнопке с классом next-step?

Question

Всем привет!

Прошу помочь разобраться, почему не работает клик на кнопку Далее:

Возможная проблема
Подозрение на эту строку: $('.next-step').on("click", showNext('#tab'));

Как должен работать?
При нормальной работе, клик на кнопку, если все поля заполнены, должен переносить на второй таб

let id = $('ul .tab-link.active').index() + 1;
const tabLinksLength = $('ul .tab-link').length;

$(".tab-link").on("click", function(event) {
  event.preventDefault();
  showTab($(event.target).attr("href"));
  id = $(this).parent().index() + 1;
});


function showTab(id) {
  console.log('showTab id', id)
  $(".tab-link.active").removeClass("active");
  $(".tab-body.active").removeClass("active");
  let $tab = $(`.tab-link[href="${id}"]`);
  $tab.addClass("active");
  $($tab.attr("href")).addClass("active");
  
}

$('.next-step').on("click", showNext('#tab'));
function showNext(data) {
   if(id == 4){
     $('.next-step').attr("disabled", true);
     $('.next-step').addClass("disp-none");
     $('.payClass').removeClass("disp-none");
  } 
  if($(".tab-body.active").hasClass('step1')){
 
    const inputFeilds = document.querySelectorAll(".tab-body.active input");
    const validInputs = Array.from(inputFeilds).filter( input => input.value !== "");
    console.log(inputFeilds.length);
    console.log(validInputs.length);
    if( inputFeilds.length == validInputs.length){
      id++;
      $(`.tab-link[href="${data}${id}"]`).removeAttr("disabled");
      showTab(`${data}${id}`);
      return;
    }
  }
  if($(".tab-body.active").hasClass('step2')){
    
    const inputFeilds = document.querySelectorAll(".tab-body.active input");
    const validInputs = Array.from(inputFeilds).filter( input => input.value !== "");

    if( inputFeilds.length == validInputs.length){
      id++;
      $(`.tab-link[href="${data}${id}"]`).removeAttr("disabled");
      showTab(`${data}${id}`);
      return;
    }
  }
  if($(".tab-body.active").hasClass('step3')){
 
    const inputFeilds = document.querySelectorAll(".tab-body.active input");
    const validInputs = Array.from(inputFeilds).filter( input => input.value !== "");

    if( inputFeilds.length == validInputs.length){
      id++;
      $(`.tab-link[href="${data}${id}"]`).removeAttr("disabled");
      showTab(`${data}${id}`);
      return;
    }
  }
  if($(".tab-body.active").hasClass('step4')){
    
    const inputFeilds = document.querySelectorAll(".tab-body.active input");
    const validInputs = Array.from(inputFeilds).filter( input => input.value !== "");

    if( inputFeilds.length == validInputs.length){
      id++;
      $(`.tab-link[href="${data}${id}"]`).removeAttr("disabled");
      showTab(`${data}${id}`);
      return;
    }
  }
 
  
}

ul {
  display: flex;
  gap: 8px;
  list-style-type: none;
}
li a {
  border: 1px #ccc solid;
  padding: 3px;
  text-decoration: none;
}
li a[disabled] {
  background: #ccc;
  pointer-events: none;
}
li a.active {
  box-shadow: 0 2px #ccc;
}
.tab-body {
  display: none;
  border: 1px #ccc solid;
  padding: 32px 16px;
  margin-bottom: 20px;
}
.tab-body span {
  display: inline-block;
  margin-top: 15px;
  cursor: pointer;
}
.tab-body span:hover {
  color: blue;
}
.tab-body.active {
  display: block;
}
.next-step {
  cursor: pointer;
  
 
}


.flex-step2, .flex-step3-2, .flex-step3-1{
   display:flex;
}
.flex-step2 label{
  display:block;
}
.step-col{
  width:30%;
}

.disp-none{
  display:none !important;
}

    <ul>
      <li><a href="#tab1" class="tab-link active">Tab1</a></li>
      <li><a href="#tab2" disabled class="tab-link">Tab2</a></li>
      <li><a href="#tab3" disabled class="tab-link">Tab3</a></li>
      <li><a href="#tab4" disabled class="tab-link">Tab4</a></li>
    </ul>

    <form action="">
        <div class="tabs">
           <div class="tab-body step1 active" id="tab1">
             <input type="text" name="a">
             <input type="text" name="b">
           </div>
              <div class="tab-body step2" id="tab2">
                <div class="flex-step2">
                   <div class="step-col">
                        <label>Пример</label>
                        <input type="text" name="name">
                    </div>
                    <div class="step-col">
                        <label>Пример 2</label>
                        <input type="tel" name="tel">
                    </div>
                     <div class="step-col">
                        <label>Пример 3</label>
                        <input type="email" name="email">
                    </div>
                </div>
           
              </div>
              <div class="tab-body step3" id="tab3">
               <div class="flex-step3-1">
                   <div class="step-col">
                        <label>Пример 4</label>
                        <input type="text" name="name">
                    </div>
                    <div class="step-col">
                        <label>Пример 5</label>
                        <input type="tel" name="tel">
                    </div>
                     <div class="step-col">
                        <label>Пример 3</label>
                        <input type="email" name="email">
                    </div>
                </div>
                <div class="flex-step3-2">
                   <div class="step-col">
                        <label>Пример 4</label>
                        <input type="text" name="name">
                    </div>
                    <div class="step-col">
                        <label>Пример 5</label>
                        <input type="tel" name="tel">
                    </div>
                     <div class="step-col">
                        <label>Пример 3</label>
                        <input type="email" name="email">
                    </div>
                    <div class="step-col">
                        <label>Пример 3</label>
                        <input type="email" name="email">
                    </div>
                </div>
                <textarea></textarea>
              </div>
            
         </div>

    </form>
    
    
    
    <button class="next-step disp-visible">Далее ></button>
    <button class="payClass disp-none">Оплата</button>

Answer 1

Оно работать и не будет так.

Правильное подозрение - Подозрение на эту строку: $('.next-step').on("click", showNext('#tab'));

$('.next-step').on("click", function(){showNext('#tab')});

Вы не можете передать слушателю событий вызов функции с аргументом в качестве обработчика событий, обработчик событий может быть задан либо как колбэк-функция, либо как объект реализующий EventListener,

БЛОГ НА HUSL

Почему не работает обработчик события клик на кнопке с классом next-step?

Ответы (1 шт):