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은로드시로드되지 않음)로 실행해야합니다. 이렇게하려면 On() function을 사용해야합니다. 다음과 같이 기능에이 구성되어 있습니다 :

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

는 그러나, 나는 트리거 요소를 지정하지만 작동하지 않습니다.

Answer 1

on() 생각대로 작동하지 않습니다.

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

당신이 on를 사용

, 당신은 source 요소에 결합되어, 그것은 source 내 trigger element 발생할 때 이벤트가 action에 대해 트리거됩니다. 어떤 input의 하위 클래스 purchase-stop 와 요소가 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"); 
    } 
}); 

비록, 형태가 유효한지 여부를 나타 내기 위해 신체에 클래스 이름을 사용하는 것은 조금 이상하다. 이 기능을 검증 기능에 추가 할 수 있습니다.