동적 HTML 결과에서 javascript 함수를 실행하는 방법은 무엇입니까? Jquery

Question

이 코드를 한번 보아주세요 -

myLink를 클릭하면 아래와 같이 정의 된 html을 보여주는 모달 대화 상자 창이 나타납니다. 이 html에는 버튼 (id = test_button)이 포함되어 있으며이 버튼을 클릭하면 Ajax 요청을 수행하려고합니다. 하지만 작동하지 않습니다. 그래서 그것을 테스트하기 위해 나는 단지 경고하고 있지만 잘 작동하지는 않습니다.

또한 test_button 클릭 기능 내에서 기존 DOM 요소 값을 업데이트 할 수 있습니다 (양식을 채우는 것).

도움 주셔서 감사합니다.

$('#myLink').click(function(event) { 
    event.preventDefault(); 
    $('<div id="iContainer">Test: <input type="text" value="" id="test_text" /> 
     <input type="button" id="test_button" value="click" /></div>').appendTo('body');   
    $("#iContainer").dialog({     
     width: 600, 
     modal: true, 
     close: function(event, ui) { 
      $("#iContainer").remove(); 
      } 
     }); 
    }); 
    $('#test_button').click(function() { 
     alert('I am in Alert'); 
     //alert($('#test_text').val()); 
    }); 

Answer 1

Events/live로 시도해보십시오

$('#test_button').live("click", function(){ 
    alert('test'); 
}); 

Answer 2

문제는 당신이 요소가 존재하기 전에 클릭 핸들러를 연결을 시도하고 있다는 점이다. CMS에서 언급 한 바와 같이

, 당신은 (.live 사용할 수 있습니다) 또는 당신은 당신의 $ ('#의 내 링크')에서 클릭 처리기를 추가 할 수 있습니다() 함수를 클릭

을과 같이 :.

$('#myLink').click(function(event) { 
     event.preventDefault(); 
     $('<div id="iContainer">Test: <input type="text" value="" id="test_text" /> 
       <input type="button" id="test_button" value="click" /></div>').appendTo('body');     
     $("#iContainer").dialog({          
       width: 600, 
       modal: true, 
       close: function(event, ui) { 
         $("#iContainer").remove(); 
         } 
       }); 

     $('#test_button').click(function() { 
       alert('I am in Alert'); 
       //alert($('#test_text').val()); 
     }); 
});