변경 이벤트가 실행되지 않음

Question

다른 곳으로 복사 할 테이블을 선택 항목과 함께 복제했습니다. 위대한 작품과 나는 아무 걱정없이 ID를 변경할 수 있습니다. 문제는 각각에 변경 이벤트를 바인딩하려고하면 절대 실행되지 않는다는 것입니다. 여기에 명백한 실수가 있습니까? 고맙습니다.

<script type="text/javascript"> 
      $(document).ready(function() { 
       var variants = $("table.variantselection").clone(false); 

       variants.find("select").each(function (i, o) { 
        $(this).attr("id", $(this).attr("id") + "_popup"); 
       }); 

       variants.find("select").change(function() { 
        alert($(this).val()); // never reaches this alert 
       }); 

       variants.appendTo("#popup_variants");    
      }); 
     </script> 

Answer 1

변경 바인딩 :

variants.find("select").live("change", function() { 
    alert($(this).val()); 
}); 

Answer 2

당신이 DOM에 대한 복제를 다시 연결 한 후 .change() 기능 를 결합 해보십시오. 라이브() 이벤트를 사용하여,

var variants = $("table.variantselection").clone(true); 

가 실패 DOM 요소와 이벤트 핸들러를 복사 true로 거짓

Answer 3

을가 #popup_variants이를 것으로 보이므로 부모 요소를 사용하면 더 편하게 사용할 수 있습니다. .delegate()

$ (문서) .ready (function() {

$("#popup_variants").delegate("select", "change", function(){ 
    alert($(this).val()); 
}); 

var variants = $("table.variantselection").clone(false); 

variants.find("select").each(function(i, o) { 
    $(this).attr("id", $(this).attr("id") + "_popup"); 
}); 

variants.appendTo("#popup_variants"); 

});