jquery에서 동적으로 생성 된 양식 제출 문제

Question

나는 이로 인해 당황 스럽다. 나는 이것을 작동시킬 수 없다. 예상대로 작동 .post 로그인 폼은 $의 외부에서 만든 경우

function appInit() { 
    $.post(clubapp,function(d){ 
     if (d == "failure:nolog") { $("#shell").html(loginform); } 
    }); 
} 

appInit(); 

$("#loginform").submit(function(e){ 
    alert("x"); // Does not alert 
}); 

을하지만이 첫 번째 블록은 로그인 폼을 표시하지만, 제출 이벤트가 잡힐되지 않습니다.

function appInit() { 
    $.post(clubapp,function(d){ 
     if (d == "failure:nolog") { j = 1; } 
    }); 
    if (j == 1) { $("#shell").html(loginform); } 
} 

appInit(); 

$("#loginform").submit(function(e){ 
    alert("x"); // catches and alerts "x" 
}); 

이것은 매우 비효 식적 인 해결 방법으로 보이며 게시 작업 내부에서 작동하지 않는 이유가 궁금합니다.

편집 : 제 2의 작품을 잘못 설명했습니다. 질문을하기 위해 디버깅 코드를 제거했지만 "if (j == 1)"앞뒤에 j 값을 표시하는 경고 쌍을 사용하여 어떻게 든 작동하게했습니다. 이러한 경고를 제거하면 실패하게됩니다.

Answer 1

것은 가 미래 이벤트에 이벤트 처리기를 바인딩하는 가장 좋은 방법은 이벤트를 제출 위임하여 사용. 일단 동적 내용이 추가되면 코드를 실행하는 것을 기억하는 것에 대해 걱정할 필요가 없습니다.

$(function() { 
    $(document).on("submit", "#loginform", function(e){ 
     alert("x"); // catches and alerts "x" 
    }); 
}); 

이점은 기존 요소와 향후 (아직 추가되지 않은) 요소에 모두 적용된다는 것입니다.

Answer 2

후에 html 양식 을 처음 만들었 기 때문에 이벤트 수신기를 설정 했으므로 작동하지 않습니다. 따라서 수신기를 설정하려고 시도 할 때 아직 양식이 없습니다. $ .post에 대한 콜백 함수는 아약스 요청이 완료되면 청취자 설정을 시도한 후에 발생합니다.

그냥 같은 콜백 함수에 수신기를 넣어 그것을 잘 작동합니다

function appInit() { 
$.post(clubapp,function(d){ 
    if (d == "failure:nolog") { 
     $("#shell").html(loginform); 

     //listener 
     $("#loginform").submit(function(e){ 
     alert("x"); // Will alert 
     }); 
    } 
}); 
}