jquery 동적 태그 작동 안되는 문제 해결

jquery 동적 태그 오류

중간 부분에 html 변수로 html 태그를 생성하는데 제일 밑에 줄 부분 이벤트가 작동을 안 하는데 제가 잘못한 걸까요? 아니면 원래 안 되는 건가요?

위 질문의 소스 코드입니다.

$('#rptType').on('change', function() {
			$('#listBody').empty();
			var rptType = $('select[name=rptType]').prop('selected', 'selected').val();
			var html = '';
			$.ajax({
				type : "post",            
		        url : "/system/system/changeRptType",     
		        data : { "mstCd" : rptType },       
		        dataType : "json",
		        success : function(data){
		        	var arrLength = data.length;
		        	var rptDtlList = [];
		        	for(var i = 0; i < arrLength; i ++) {
		        		html += '<tr>';
		        		html += '	<td><a href="javascript:void(0);" class="tbl_link pop" data-dtlCd="' + data[i].dtlCd + '">' + 	data[i].dtlCd + '</a></td>';
	        			html += '	<td><a href="javascript:void(0);" class="tbl_link pop" data-dtlCd="' + data[i].dtlCd + '">' + data[i].name + '</a></td>';
	        			html += '	<td>' + data[i].useYn + '</td>';
	        			html += '</tr>';
		        	}
		        	$('#listBody').html(html);
		        },
		        error:function(request, status, error) {
		        	alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		        }
			});
		});
		
		$('.pop').on('click', function() { ... } => 이 이벤트가 작동을 안하네요

어디가 문제인지 찾으셨나요?

Delegate 이벤트 처리

주어진 코드를 살펴보니, 이벤트가 작동하지 않는 이유는
'pop' 클래스를 가진 요소들이 초기 페이지 로딩 시에는 존재하지 않기 때문입니다.

이벤트 핸들러는 초기에 바인딩되기 때문에, 이후에 동적으로 추가되는 요소들에 대해서는 작동하지 않을 수 있습니다. 첫 번째로 아래와 같은 방법으로 해결할 수 있습니다.

$(document).on('click', '.pop', function() {
    // 클릭 이벤트 처리 내용
});

$('#rptType').on('change', function() {
    $('#listBody').empty();
    var rptType = $('select[name=rptType]').prop('selected', 'selected').val();
    var html = '';
    $.ajax({
        type: "post",
        url: "/system/system/changeRptType",
        data: { "mstCd": rptType },
        dataType: "json",
        success: function(data) {
            var arrLength = data.length;
            var rptDtlList = [];
            for (var i = 0; i < arrLength; i++) {
                html += '<tr>';
                html += '    <td><a href="javascript:void(0);" class="tbl_link pop" data-dtlCd="' + data[i].dtlCd + '">' + data[i].dtlCd + '</a></td>';
                html += '    <td><a href="javascript:void(0);" class="tbl_link pop" data-dtlCd="' + data[i].dtlCd + '">' + data[i].name + '</a></td>';
                html += '    <td>' + data[i].useYn + '</td>';
                html += '</tr>';
            }
            $('#listBody').html(html);
        },
        error: function(request, status, error) {
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
        }
    });
});

새로운 요소 추가 이벤트 처리

두 번째 방법은 새로운 요소를 추가할 때마다 해당 요소에 클릭 이벤트를 바인딩하는 것이므로 메모리 사용면에서는 첫 번째 방법보다 더 효율적일 수 있습니다.

$('#rptType').on('change', function() {
    $('#listBody').empty();
    var rptType = $('select[name=rptType]').prop('selected', 'selected').val();
    var html = '';
    $.ajax({
        type: "post",
        url: "/system/system/changeRptType",
        data: { "mstCd": rptType },
        dataType: "json",
        success: function(data) {
            var arrLength = data.length;
            var rptDtlList = [];
            for (var i = 0; i < arrLength; i++) {
                html += '<tr>';
                html += '    <td><a href="javascript:void(0);" class="tbl_link pop" data-dtlCd="' + data[i].dtlCd + '">' + data[i].dtlCd + '</a></td>';
                html += '    <td><a href="javascript:void(0);" class="tbl_link pop" data-dtlCd="' + data[i].dtlCd + '">' + data[i].name + '</a></td>';
                html += '    <td>' + data[i].useYn + '</td>';
                html += '</tr>';
            }
            $('#listBody').html(html);

            // 새로운 pop 클래스를 가진 요소에 클릭 이벤트 바인딩
            $('.pop').on('click', function() {
                // 클릭 이벤트 처리 내용
            });
        },
        error: function(request, status, error) {
            alert("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error);
        }
    });
});