#jquery on

동적으로 추가/생성된 태그에 이벤트 추가 방법

mirinae.maru

화면이 로딩된 후 추가된 div태그나 버튼에 이벤트를 등록할 경우가 있다. jQuery에서는 $(…).on(‘event’, ‘target’, function() {…}); 함수를 사용한다.

<html>
<head>

<title>동적 추가된 div태그에 이벤트 추가</title>
<style type="text/css">
.dynamicDiv {
    width:170px;
    background-color: #CBE7F4;
    text-align:center;
    font-weight:bold;
    padding: 3px 3px;
    cursor:pointer;
    margin:5px;
    border-radius:.25em;
    border:1px solid #449999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">

$(document).on('click', '.dynamicDiv', function() {
	console.log("동적 추가된 div태그 '"+$(this).attr("id")+"'이 클릭되었습니다.");
});

var index = 0;	
var addDiv = function() {
	$("body").append("<div class='dynamicDiv' id='"+index+"'>동적추가 div " +index+ "</div>");
	index++;
};

</script>

</head>
<body>
<input type="button" onclick="addDiv()" value="Div 태그 추가">
</body>
</html>

‘Div 태그 추가’버튼을 클릭하면 동적으로 ‘동적추가 div’ div가 화면에 추가된다. 추가된 div를 클릭하면 $(document).on(…);에 의해서 추가된 click이벤트가 실행된다.

예제에서는 click이벤트가 dynamicDiv라는 클래스를 가진 Div태그에 등록되었다.

동적으로 추가된 div의 이벤트