부트스트랩 페이지네이션으로 페이지 이동시 checkbox 선택이 안되는 ISSUE 정리

이슈사항

부트스트랩을 이용해 페이지네이션이 되는 표를 가져와 쓰던 중 첫 번째 페이지에 로드된 10개의 row는 checkbox 접근이 잘 되지만, 두 번째 페이지에 들어있는 row는 checkbox 접근도 안되고, 이벤트 target도 잡히지 않아 데이터를 선택할 수 없는 issue에 부딪혔다.

기존 코드

$(function(){ 
var arr = [];
//1. checkbox 클릭시 clickEvent가 작동하도록 한다.
$('input:checkbox[name="baljuCheckBT"]').click(function(){
	//체크되었는지 여부 확인
	if($(this).is(':checked')){
		console.log("체크");
		arr.push(clickEvent(event));
	}else{
		console.log("체크해제");
		obj = clickEvent(event);
		console.log(obj["product_code"]);
					
		arr = arr.filter((element) => {
		console.log("pp",element["product_code"]);
		return element["product_code"] != obj["product_code"];
     });
}
console.log(arr);
}); 
		

기존에는 페이지가 로드되면 input태그의 checkbox의 name 속성을 이용하여 접근하였다.
때문에 부트스트랩을 이용해 페이지네이션 된 두 번째 페이지는 나중에 로드 되기 때문에 접근할 수 없었다.

해결 방법

var arr = [];
function chkCall(obj){
	if($(obj).is(':checked')){
		console.log("체크");
		arr.push(clickEvent(event));
	}else{
		console.log("체크해제");
		obj = clickEvent(event);
		console.log(obj["product_code"]);
					
		arr = arr.filter((element) => {
		console.log("pp",element["product_code"]);
		return element["product_code"] != obj["product_code"];
	});
}
console.log(arr);
}

<input class="form-check-input" type="checkbox"
       id="flexCheckDefault" name="baljuCheckBT" onchange="chkCall(this)">

페이지가 로드 될 때 실행되는 것이 아니라
checkbox에서 onchange 이벤트가 일어날 때 로직을 실행하도록 함수화하여 연결해주었다!

.
.
.
부트스트랩 JS를 뜯어봐야하나라는 생각이 들었던 것이 무색할 정도로 간단하고도 최고의 해결법!