Jquery .on () 제출 이벤트

100

에 문제가 .on()있습니다. 여러 양식 요소 (를 사용하는 양식 class="remember")가 있으며 form.rememberAJAX를 사용하여 다른 요소를 추가 합니다. 따라서 다음과 같은 제출 이벤트를 처리하기를 원합니다.

$('form.remember').on('submit',function(){...})

그러나 AJAX로 추가 된 양식은 작동하지 않습니다.

문제는 어디입니까? 버그입니까?

— 안톤 아브라모프
소스

10

시도$(document).on('submit','form.remember',function(){...})

— Sergio

1

@Sergio document는 가장 가까운 정적 부모로 바꿉니다 .

— Mark Baijens

219

문서 수준에 이벤트를 위임해야합니다.

$(document).on('submit','form.remember',function(){
   // code
});

$('form.remember').on('submit'동일하게 작동 $('form.remember').submit(하지만 사용하면 $(document).on('submit','form.remember'나중에 추가 된 DOM에서도 작동합니다.

— 디페시 파마
소스

24

또한 명심 $(document).on보다 훨씬 낮은 성능을 가지고 $('form.remember').on('submit'. 이제 문서의 모든 제출 이벤트 를 수신 해야합니다. on document가능하면 듣는 것보다 범위를 약간 제한하는 것이 훨씬 낫습니다.

— Liam

7

$ ( 'body'). on ( 'submit', 'form.remember', function () {// 코드}); 내 문제 해결

— Olotin Temitope

@Liam이 정확하더라도 $ (document) .on은 여전히 ajax 렌더링 요소에 대한 CRUD 작업에 유용합니다.

— Norielle Cruz

38

같은 증상에 문제가있었습니다. 제 경우에는 제출 기능에 "return"문이 누락 된 것으로 나타났습니다.

예를 들면 :

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })

— vitor_gaudencio_oliveira
소스

2

참고 return false;양식을 제출하지 않습니다. 양식을 제출하려면 return true;.

— Kai Noack

0

여기서 문제는 "on"이 당시 존재하는 모든 요소에 적용된다는 것입니다. 요소를 동적으로 생성 할 때를 다시 실행해야합니다.

$('form').on('submit',doFormStuff);

createNewForm();

// re-attach to all forms
$('form').off('submit').on('submit',doFormStuff);

양식에는 일반적으로 이름이나 ID가 있으므로 새 양식에도 첨부 할 수 있습니다. 많은 동적 항목을 생성하는 경우 설정 또는 바인딩 기능을 포함합니다.

function bindItems(){
    $('form').off('submit').on('submit',doFormStuff); 
    $('button').off('click').on('click',doButtonStuff);
}

따라서 무언가를 만들 때마다 (보통 내 경우에는 버튼) bindItems를 호출하여 페이지의 모든 것을 업데이트합니다.

createNewButton();
bindItems();

탭과 모달을 사용하면 예상치 못한 작업을 수행하는 경향이 있기 때문에 'body'또는 문서 요소를 사용하는 것을 좋아하지 않습니다. 간단한 1 페이지 프로젝트가 아니라면 항상 가능한 한 구체적으로 작성하려고합니다.

— Danial
소스