[jquery] Jquery .on () 제출 이벤트

Program / 글쓴이

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

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

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

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

답변

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

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

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

답변

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

예를 들면 :

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

답변

여기서 문제는 “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 페이지 프로젝트가 아니라면 항상 가능한 한 구체적으로 작성하려고합니다.

답변