JQuery: Реагировать на динамические классы в формах

Question

Я создал HTML-форму, разделенную на разделы.

Я использую Jquery добавить классы к элементу тела в зависимости от того, какие разделы были заполнены.

По умолчанию тело имеет класс purchase-stop. Когда все секции заполняются, это изменяется на purchase-go.

Когда пользователь нажимает на кнопку отправки, я использую следующий код для отображения сообщения:

$("input").on('click', '.purchase-stop', function() 
{ 
    alert("You haven't visited all sections. Please visit them all to ensure you are happy with the choices"); 
}); 

Проблема заключается в следующем будет отображаться даже purchase-stop было изменено на purchase-go.

Как его получить, чтобы отображать только, если классы purchase-stop?

Кроме того, два поля в форме являются обязательными. Я использую следующий код для проверки, если эти обязательные разделы заполняются:

$(".changing-room").submit(function(e) 
    { 
     e.preventDefault(); 

     var isFormValid = true; 
     $("input.required").each(function() 
     { 
      if ($.trim($(this).val()).length === 0) 
      { 
       $(this).parent().addClass("error"); 

       isFormValid = false; 
      } 
      else 
      { 
       $(this).parent().removeClass("error"); 
      } 
     }); 
     if (!isFormValid) 
     { 
      alert("Some fields are blank (highlighted in red). Please fill them in"); 
      $('input').blur(); 
     } 

     if (isFormValid) 
     { 
      $('body').addClass('purchase-active'); 
      window.scrollTo(0, 0); 
     } 
     return isFormValid; 

    }); 

Но опять же, я только хочу, чтобы работать, когда тело класса устанавливается в purchase-go (и не purchase stop).

Согласно документам JQuery, я должен запустить Jquery для динамического класса (поскольку purchase-go не находится в HTML при загрузке). Для этого я должен использовать On() function. на функции производится следующим образом:

.on("action [e.g. click]", "[trigger element]", function(event) 

Однако, я указал на спусковой элемент, но он не работает.

Answer 1

on() не работает так, как вы думаете.

$("[source].on("[action]", "[trigger element]", function(event)

При использовании on, вы являются обязательными для source элемента, и событие инициируется для action, когда это происходит на trigger element в source.

Так что в вашем случае, вы настраиваете обработчик щелчка, чтобы стрелять, когда элемент с классом purchase-stop, который является потомком любой input является click-е изд.

Вам нужно будет сделать что-то вроде этого:

$('input[type="submit"]').click(function(e) { 
    if ($('body').hasClass('purchase-stop')) { 
     alert("You haven't visited all sections. Please visit them all to ensure you are happy with the choices"); 
    } 
}); 

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