로드 된 폼에 변경 이벤트가 발생하지 않습니다.

Question

jquery 코드가있는 HTML 문서가 있습니다.

 $(function(){ 
[...] 
    $("#newNotice").click(function(){ 
     $("#properties").load("testDiagramm.html #NoticeForm"); 
     return false; 
     }); 
    function showFormValues(){ 
     var s = $("form").serialize(); 
     [... Do things ...] 
    } 
    $("input, textarea").change(showFormValues); 
    }); 

처음에는 HTML 문서에 양식이 없습니다. 그러나 나는 다른 형식을 문서에로드합니다. 그 중 하나가 여기에서 볼 수 있습니다.

$("#properties").load("testDiagramm.html #NoticeForm"); 

문제가 있습니다. 그 코드 라인

$("input, textarea").change(showFormValues); 

양식은 처음에로드되었을 때만 발동됩니다. 내가 나중에로드 할 공식에서 뭔가를 변경했을 때 showFormValues ​​() 함수를 실행하려면 어떻게해야합니까?

답변 해 주셔서 감사합니다.

라라

Answer 1

양식은이 아약스를 통해 다시로드, 그래서 이벤트 핸들러가 이전에 손실 페이지에 주입받을 요소에 바인딩 한 후에는이 DOM에 바인딩을 잃는다.

나는 일반적으로 live와 이벤트 위임을 사용하는 것이 좋습니다,하지만 그렇게 안전한 베팅을 $ .load 함수에 두 번째 매개 변수로 콜백을 사용하여 바인딩하는 것, 변경 이벤트를 지원하지 않습니다

$(function(){ 
[...] 
    $("#newNotice").click(function(){ 
     $("#properties").load("testDiagramm.html #NoticeForm", function() { 
      $("input, textarea").change(showFormValues); 
     }); 
     return false; 
     }); 
    function showFormValues(){ 
     var s = $("form").serialize(); 
     [... Do things ...] 
    } 
    $("input, textarea").change(showFormValues); 
    });