jQuery로 append 시 이벤트가 동작 안할 때 해결방법

해결방법

$('부모').on('click', '이벤트가 붙어있는 요소', function(){


});

발생했던 문제

텍스트 입력 후 추가 버튼을 누를시,

하단의 테이블에 텍스트와 함께 버튼이 함께 append 되도록 하였는데

이렇게 추가된 버튼은 jQuery로 이벤트를 처리하려해도 동작하지 않았다.

 

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function(){
		$('#add_component').click(function(){
			if($('#component_text').val() != ""){
				$('#components').append("<tr>"
						+ "<td>" + $('#component_text').val() + "</td>"
						+ "<td>" + "<input type='button' id='delete_component' value='X'>" + "</td>"
						+ "</tr>");
				$('#component_text').val(""); // 입력하는 곳 초기화	
			}
		});
		
		//이렇게 작성하면 됨
		$('#components').on('click', '#delete_component', function(){
			alert(1111);
		});
	});
</script>

<h3>구성용품</h3>

<input type="text" id="component_text" value=""> <input type="button" id="add_component" value="추가">

<table id="components">

</table>