2010-01-12 2 views
7

나는 onsubmit 속성이있는 양식이 있습니다. 새로운 submit 이벤트를 바인드 할 필요가 있습니다. 기존의 submit 기능보다 먼저 실행해야합니다.기존의 onsubmit/submit 전에 submit() 함수를 바인드 할 수 있습니까?

다음 코드는 문제를 보여줍니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     jQuery(function($) { 
     // a plugin 
     $('form').submit(function() { 
      alert("Second"); 
     }); 
     // an other plugin 
     $('form').submit(function() { 
      alert("Third"); 
     }); 

     // this event must always be executed as first event 
     $('form').submit(function() { 
      alert("Always First"); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <form onsubmit="javascript:alert('Fourth');"> 
     <p> 
     <input type="submit"> 
     </p> 
    </form> 
    </body> 
</html> 

스크립트를 실행하면 먼저 "Second", "First"가 표시됩니다.

새 제출 이벤트를 바인드하고 기존 이벤트 이전에 함수를 호출해야하는지 여부를 지정할 수 있습니까?

제약 :

  • 기존 이벤트를 보존해야합니다. onsubmit 속성의 내용이 레일에 의해 쓰여진 매우 복잡한 로직을 포함하고 있기 때문에
  • 나는 기존 이벤트를 제거 할 수 없습니다
  • (ADDED) : 이벤트는 항상 기존의 onsubmit 이벤트 전에 실행되어야하며 이미 바인더 제본 이벤트는 (아마도 바인더 제본 다른 플러그인에 의해)

어떤 생각?

답변

14

인라인, 당신에 대한 참조를 얻을 수, 첫 번째 이벤트가 발생 제출 form 요소에 onsubmit 속성을 무효화하고 새 제출 이벤트를 결합,이 사람은 당신의 이전이 핸들러를 제출 실행합니다 : 나는 call 방법을 사용

jQuery(function($) { 
    var form = $('form'), oldSubmit = form[0].onsubmit; 
    form[0].onsubmit = null; 

    $('form').submit(function() { 
     alert("First"); 
     oldSubmit.call(this); // preserve the context 
    }); 
    }); 

참고 이전에 제출 핸들러를 호출하는 데, 이것은 그 함수 내부의 this 키워드를 보존하는 것입니다, 그것은 form 요소 자체 일 것이다. 원래 onsubmit 핸들러가 일부 검증 동작이있는 경우

, 당신은 var ret = oldSubmit.call(this);

확인 위의 예 here하여 반환 값을 얻을 수 있습니다.

+0

이 솔루션은 훌륭하게 작동합니다. 다른 플러그인을 이미 동일한 양식에 바인딩했을 수도 있습니다. onsubmit/binded 이벤트 전에 이벤트를 바인드 할 수 있습니까? 바인드 해제/바인드 (복제 기능의 구현 읽기)를 사용하려고했지만 합리적인 해결책을 얻을 수 없었습니다. –

+0

많은 플러그인이 live()를 사용하여 제출 이벤트를 캡처하므로 die() 함수를 사용해 볼 수 있습니다! http://api.jquery.com/live/ – xijo

3

기존 submit 처리기를 가져 와서 변수에 저장하십시오.

새 처리기에서 이전 submit 처리기에서 저장 한 해당 함수를 호출하고 새 처리기를 수신기에 다시 할당하십시오.

예 : 같은

jQuery(function($) { 

    $('form').submit(function() { 
     var first = this.onsubmit; 
     //... 
     first.call(this); 
    }); 
    }); 

... 또는 뭔가. =)

+0

'unbind'는 인라인'onsubmit' 이벤트 핸들러를 제거하지 못하고'Function.prototype.toString' 메소드에 의존하기 때문에'Function' 생성자 접근법은 일부 브라우저에서는 작동하지 않을 수 있습니다. 'functionBody' 인수를 String으로 전달하십시오.) 그 메소드는 구현에 따라 다르므로, 참조를 사용하고'Function' 생성자가 수행 한 * evaling *을 피하는 것이 더 안전하다고 생각합니다. – CMS

+2

바인딩 해제가 작동하지 않습니다. –

0

OP가 받아 들였기 때문에 this이 효과가 있다면 더 좋은 방법이라고 생각합니다.

관련 문제