[에러해결][Jquery] 동적 append된 element에 click event가 적용 안됨

---

<잘못된 코드>

<tr>
		<td ><input type="hidden" id="reviewIdx" value="${review.idx }"></td>
		<td >${review.name}</td>
		<td ><input class="review_content" type="text" value="${review.content}" disabled></td>
		<td id="parentId" >
			<c:if test="${info.name eq review.name }">
					<input data-idx="${review.idx }" src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/edit.png" type="image" class="edit" value="수정">&nbsp; 
					<input data-idx="${review.idx }" src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/delete.png" type="image" class="delete" value="삭제">&nbsp; 
			</c:if>
			<br>${review.createdate}
		</td>
		<td align="center"><input data-idx="${review.idx}" data-recommend="${review.recommend}"  src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/like.png" class="likebtn" type="image"  style="float:left;">
		${review.recommend}</td>
    	<td >
    	<button type="button">신고</button>
    	</td>
</tr>

	//리뷰 수정 누르면 다른 리뷰수정 disabled
	$('.edit').on('click', function(){
		$('.review_content').attr('disabled', true);
		$(this).parent().prev().children().attr('disabled', false);
		$(this).attr('hidden', true);
		$(this).next().attr('hidden', true);
		$(this).parent().append('<button type="button" id="btnUpdate" name="btnUpdate">등록</button>')
	});

---

 

 

 

 

원하는 기능은 

1)내가 작성한 댓글 옆에는 편집, 삭제 버튼이 나타나고:성공(코드생략)

2)편집을 누르면 해당댓글 내용이 수정 가능하게하고 :성공(아래의 코드)

	//리뷰 수정 누르면 다른 리뷰수정 disabled
	$('.edit').on('click', function(){
		$('.review_content').attr('disabled', true);
		$(this).parent().prev().children().attr('disabled', false);
		$(this).attr('hidden', true);
		$(this).next().attr('hidden', true);
		$(this).parent().append('<button type="button" id="btnUpdate" name="btnUpdate">등록</button>')
	}); //문제의 코드
	

		$('#reviewTd').on('click','.btnUpdate', function() {
			 console.log("ㅠㅠㅠㅠㅠ");
		})
		
	//리뷰 수정한 내용 등록
		function updateReview() {
		console.log("????");  //반응 안함
			var idx = $('#reviewNum').val();
			var content = $('#editContent').val();
				$.ajax({
					url:'<%=request.getContextPath()%>/updateReview',
			         type: 'post',
				     data: {
				 		"idx" : idx,
						"content" :content
					},
			         success: function(result) {
			        	 // location.reload();
			          },
			          error: function() {
			          	alert('리뷰 수정 실패');
			          }
				});	
	}

3)편집을 누르면 편집,삭제버튼이 사라지고 등록버튼이 작동하게 하고싶었다 :실패

 

문제는 3번에서 발생...등록버튼이 나타나는데 반응을 안한다....

 

 

원인은 동적으로 append된 요소에는 클릭 이벤트가 작동되지 않아서였다.

구글링해서 찾은 해결 방법은 아래와 같다. 

$("부모요소").on('click', '함수 적용할 태그', function() {
  내용
});

 

 

고친 코드(지만 작동 안함)

	$('#parentId').on('click','#btnUpdate', function() {
			 console.log("반응 테스트");
		})

 

 

왜 하라는대로 바꿨는데 반응을 안하니...?

버튼 문제인가 parent문제인가 id값을 잘못줬나....여러가지 바꿔봤지만 생각보다 간단히 해결됐다

 

<성공한 코드>

$(document).on('click','#btnUpdate', function(){
	console.log("반응 테스트");
}

부모 요소에 document를 넣으니 잘됐다.

 

구글은 부모 id나 name을 넣으라했는데 뭐때문에 안됐을까...?

다음에 알아봐야겠다.....

 

이제 버튼이 반응하니 함수 연결해서 기능구현하면 된다^^!