event.preventDefault를 다시 활성화하는 방법은 무엇입니까?


80

모든 제출 버튼에 대한 기본 작업을 금지 한 웹 페이지가 있지만 버튼에 대한 기본 제출 작업을 다시 활성화하고 싶습니다. 어떻게해야합니까?

현재 다음을 사용하여 기본 작업을 방지하고 있습니다.

$("form").bind("submit", function(e){
e.preventDefault();
});

다음을 사용하여 성공적으로 수행했습니다.

$(document).ready(function(){
$("form:not('#press')").bind("submit", function(e){
e.preventDefault();
});

하지만 버튼을 클릭하면 동적으로 할 수 있습니까?


답변:


124

이벤트 바인딩을 해제하고 preventDefault가 아닌 별도의 이벤트로 리 바인드하거나 바인딩 해제 후 나중에 메서드에서 기본 이벤트를 직접 호출해야합니다. 마법 같은 이벤트가 없습니다 .cancelled = false;

요청대로

 $('form').submit( function(ev){

         ev.preventDefault();

         //later you decide you want to submit
         $(this).unbind('submit').submit()

  });

답변 해 주셔서 감사합니다. 그 방법에 대한 예를 들어 주시겠습니까?
Richbits

3
가장 좋은 방법 중 하나는 필요할 때 조건에 따라 preventDefault ()를 호출하는 것입니다. 이것이 귀하가 설명한 것을 정확하게 달성하는 유일한 방법이지만 이것이 귀하의 문제에 대한 최상의 해결책인지 확인하는 것이 좋습니다. :)
Swivel

감사합니다. 나는 그것을 기반으로 비슷한 일을해서 구글 애널리틱스가 작동하도록했습니다.
Derek

아름답고 우아한 솔루션. 정말 고마워!
Cooper Maruyama

1
@Swivelgames 괜찮습니다.하지만 제가 의미하는 바는 if (someLongRunningOperation()) {e.preventDefault();}그 이유 때문에 확실히 실패 할 수 있다는 것입니다. 내 의견을 작성하기 직전에이 문제를 직접 디버깅했습니다.
Casey

13

이 코드로 redsquare가 제안하는 것을 수행하십시오.

function preventDefault(e) {
    e.preventDefault();
}
$("form").bind("submit", preventDefault);

// later, now switching back
$("form#foo").unbind("submit", preventDefault);

또는 제출이 허용 될 때마다 양식 속성을 할당합니다. 이 같은:

function preventDefault(e) {
    if (event.currentTarget.allowDefault) {
        return;
    }
    e.preventDefault();
}
$("form").bind("submit", preventDefault);

// later, now allowing submissions on the form
$("form#foo").get(0).allowDefault = true;

놀랍고 간단한 솔루션! 이것은 탄성체 스크롤링에 대한 iOS 기본 동작을 켜고 끄고 일부 요소를 스크롤 가능하게 유지하는 문제를 해결했습니다. 멋있는!
Garavani

5
function(e){ e.preventDefault();

그리고 그 반대

function(e){ return true; }

건배!


1
한 가지 문제는 원하는 작업이 너무 오래 걸리면 (예 : Ajax 호출) 조건문 뒤에 넣으면 "return false"또는 "e.preventDefault ()"에 도달하지 못할 수 있다는 것입니다.
Casey

2
$('form').submit( function(e){

     e.preventDefault();

     //later you decide you want to submit
     $(this).trigger('submit');     or     $(this).trigger('anyEvent');

4
오타 eve$(this).trigger('submit')동일로 실행됩니다 여기에 e.preventDefault(). 이것은 잘못된 대답입니다.
i-- 2015

@ i-- 감사합니다! 나는 그것이, 오타를 수정
adardesign

1

비동기 작업 (타이머, ajax)을 사용하면 다음 isDefaultPrevented과 같이 속성을 재정의 할 수 있습니다 .

$('a').click(function(evt){
  e.preventDefault();

  // in async handler (ajax/timer) do these actions:
  setTimeout(function(){
    // override prevented flag to prevent jquery from discarding event
    evt.isDefaultPrevented = function(){ return false; }
    // retrigger with the exactly same event data
    $(this).trigger(evt);
  }, 1000);
}

이것은 정확히 동일한 데이터로 이벤트를 다시 트리거하는 가장 완벽한 방법입니다.


0

최근에 비슷한 문제가 발생했습니다. 양식이 제출되면 실행할 양식과 PHP 기능이 있습니다. 그러나 먼저 자바 스크립트를 실행해야했습니다.

        // This variable is used in order to determine if we already did our js fun
        var window.alreadyClicked = "NO"
        $("form:not('#press')").bind("submit", function(e){
            // Check if we already run js part
            if(window.alreadyClicked == "NO"){
                // Prevent page refresh
                e.preventDefault();
                // Change variable value so next time we submit the form the js wont run
                window.alreadyClicked = "YES"
                // Here is your actual js you need to run before doing the php part
                xxxxxxxxxx

                // Submit the form again but since we changed the value of our variable js wont be run and page can reload (and php can do whatever you told it to)
                $("form:not('#press')").submit()
            } 
        });

-3

다음을 추가하여 작업을 다시 활성화 할 수 있습니다.

this.delegateEvents();  // Re-activates the events for all the buttons

백본 js 뷰의 렌더링 함수에 추가하면 필요에 따라 event.preventDefault ()를 사용할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.