JQuery .append로 button 추가 후 click

만들던 프로젝트에서 .append로 input 과 button을 추가해주는 기능(?)을 구현해놓았다.

문제점은 추가한 button을 눌러도 반응이 없다는것...

 

$("#ReplyComment").append(
  "<input type=\"text\" id=\"CommentReplyContent\" name=\"CommentReplyContent\">" +
  "<button type=\"button\" id=\"CommentReplyInsert\">"+"작성"+"</button>"
)	

이렇게 추가하도록 만들었고

$(function(){
	$("#CommentReplyInsert").click(function(){
		alert("hi");
	})

당연하게 이렇게 불러오려고 작성했었다.

 

그러나 아예 버튼이 먹히지 않았다.

button에 onclick으로 넘기게 되면 되긴 되던데 별로 사용하고 싶지 않았었기에 방법을 찾아보니!!!

 

.append로 추가해준 것은 저렇게 받아올수가 없는 듯하다.

 

$(document).on("click", "#CommentReplyInsert", function(){
	alert("button hi");
})

 

찾은 방법이 이것이다.

 

이렇게 변경해주니 너무 잘됨!!

 

$(document).on은 DOM트리보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아서 실행한다.

 

대부분의 DOM 이벤트 들이 Tree의 꼭대기에서 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 이것이 가능한 것이다.

 

DOM에 대해 좀 더 공부해야 할 필요성을 느낀다 ㅠㅠ