본문 바로가기
HTML

38일차//JQuery//답글 달기 창 코드

by aesup 2021. 3. 8.
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 중요하다 -->
<h3>Detail view</h3>

<textarea rows="2" cols="20">기본글입니다~~</textarea>
<br><br>
<button type="button"  id= "answer">답글입력</button>

<!--답글이 추가될 div 창 -->
<div id = "answerFrm">
<!-- <br>답글: <input type ='text' id ='answerText'>
<button id = 'answerBtn'>답글작성완료</button> -->

</div>

<script type="text/javascript">
//첫번째 방식: 하이드 ,쇼우 기본폼이 정해졌을때는 이걸 사용하고
//두번째 방식: 스크립트에서 생성 갯수가 정해져있지 않을땐 이걸 사용
//$("answerFrm").hide();
$(document).ready(function() {
	 
	$("#answer").click(function() {
	
		//$("answerFrm").show();
	
		let txtf = "<br>답글: <input type ='text' id ='answerText'>";
		$("#answerFrm").append(txtf);
		//택스트 필드 변수
		
		let btn = "<button id = 'answerBtn'>답글작성완료</button>";
		$("#answerFrm").append(btn);
		
	}); 
	
	
	//이건 인식이 안되기때문에 사용불가
	/* $("#answerBtn").click(function () {
		alert("answerBtn.click");
	});  */
	
	$(document).on("click", "#answerBtn", function () {
		alert("answerBtn onclick");
	});
	
	
	
	
});

</script>


</body>
</html>

답글입력 버튼을 누를시 답글 상자가 떠서 입력 가능하다

728x90