아약스 탐색으로 jQuery가 실행되지 않습니다.

Question

내 WordPress 테마에서 연락처 페이지 및 의견 양식에 라이브 입력 유효성 검사가 있습니다. 그것은 기본적으로 올바른 일을 PHP 파일에 아약스 요청이야.

또한 ajaxify (https://github.com/browserstate/ajaxify)를 사용하여 ajax 탐색을 작성했습니다.

ajaxify와 함께 사용할 때 라이브 입력 유효성 검사가 더 이상 작동하지 않는다는 점을 제외하면 두 가지 모두 작동합니다. 당신은 연락처 페이지로 집에서 이동하는 경우 http://www.deenastic.com

(메인 메뉴에서 링크, 오른쪽 상단에 안 하나에) 뭔가를 입력 :

당신은 내가 여기에 무슨 말인지의 라이브 데모를 확인하실 수 있습니다 입력 중 하나에서 아무 일도 일어나지 않습니다. 그런 다음 페이지를 새로 고치고 어떤 것을 끌어 들이면 유효성 검사가 수행됩니다. (이 문제를 이해하는 데 도움이 경우)

여기가 검증을 위해 만든 jQuery를 수 있습니다 :

$('#contact-form input').change(function() { 

    var t = this; 
    var ajaxUrl = $('#contact-form').attr('action'); 

    if (this.value != this.lastValue) 
    { 
     if (this.timer) 
      clearTimeout(this.timer); // this is to prevent ajax request being fired is someone is holding a key (it will fire when it'll be released) 
     // todo: append ajax loader 

     this.timer = setTimeout(function() { // Fire ajax request in 1/5 second 
      $.ajax({ 
       url: ajaxUrl, 
       data: 'action=validate_'+t.name+'&data='+t.value, 
       dataType: 'text', 
       type: 'post', 
       success : function(data) { 
        if (data == 'ok') 
        { 
         var span = t.parentNode.lastChild; 
         if (span.className == 'error') // do we had an error before ? 
          t.parentNode.removeChild(span); 

         // creates our new elem 
         var icon = document.createElement('span'); 
         icon.setAttribute('class', 'check'); 
         icon.innerHTML = ' '; 
         t.parentNode.appendChild(icon); 
         t.style.borderColor = "#1abc9c"; 
        } 
        else 
        { 
         var span = t.parentNode.lastChild; 
         if (span.className == 'check') 
          t.parentNode.removeChild(span); 

         // creates our new elem 
         var icon = document.createElement('span'); 
         icon.setAttribute('class', 'error'); 
         icon.innerHTML = ' '; 
         t.parentNode.appendChild(icon); 
         t.style.borderColor = "#e74c3c";  
        } 
       } 
      }); 
     }, 200); 
    } 
    this.lastValue = this.value; 
}); 

Answer 1

가 JQuery와 검증 엔진을 사용하여 달성 될 수있다. ajax 요청 후 jquery 유효성 검사 엔진을 다시 호출합니다. 또한 변경 사항을 라이브 변경으로 변경합니다. 같은 :

$('#contact-form input').live('change',function(){ 
     $(this).validate(); 
    }); 

Answer 2

나는