[javascript/JQuery] 동적(append, aftter 등)으로 a태그 생성후 click 이벤트 작동되지 않을 때

기존에 있던 tr태그 밑에 append를 사용하여 한번더 tr태그를 동적으로 생성하였다

<div>
	<tr>
    	<td>
        	<a href="javascript:void(0);" class="clickEv">test</a>
        <td>
    </tr>
</div>

▽

<div>
	<tr>
    	<td>
        	<a href="javascript:void(0);" class="clickEv">test</a>
        <td>
    </tr>
    <tr>
    	<td>
        	<a href="javascript:void(0);" class="clickEv">test</a>
        <td>
    </tr>
</div>

 

그리고 클릭이벤트를 실행하려고 아래와같이 코드를 작성했다

<script>
	$(function(){
    	//1. 
    	$('.clickEV').click(function(){
        });
        
        //2. 
    	$('.clickEV').on("click", function(){
        });
    });
</script>

그랬더니 클릭이벤트가 제대로 작동하지 않았다.......... 

 * 기존에 있던 tr태그 안에있던 첫번째 a태그만 클릭이되고 동적으로 생성된 태그만 먹히지 않음

 

 

 

 

* 해결방법 * 

서치 후에 해결방법을 발견했다.!

 

먼저, 아래처럼 최상위에 id값을 부여하고

<div id="parent_div">
	<tr>
    	<td>
        	<a href="javascript:void(0);" class="clickEv">test</a>
        <td>
    </tr>
    <tr>
    	<td>
        	<a href="javascript:void(0);" class="clickEv">test</a>
        <td>
    </tr>
</div>

 

아래 클릭이벤트 코드를 작성해주었더니 정상적으로 작동이 되었다.

<script>
	$(function(){
    	$('#parent_div').on('click', '.clickEv', function() {
        	console.log("출력 test");
        });
    });
</script>