jQuery - 동적페이지 클릭 이벤트 발생 안됨 해결법 및 이벤트 적용 대처 방법

들어가며

---

기존에 사용하던 제이쿼리 클릭 이벤트가 동적 페이지로 변경되면서 작동이 하지 않아 그에 따른 해결 방법과 해결 방법의 적용 결과로 기존 제이쿼리 이벤트 처리 방법에 대한 대처 방법을 정리한다.

 

 

클릭 이벤트 미발생 해결법

---

위에서 말한 것처럼 보통 제이쿼리 클릭 이벤트 사용시에는 다음과 같이 사용한다.

$('#id').click(function(){
	//구현내용
})

하지만 이 방법을 사용하면 동적페이지로 변경되는 순간 동일한 id를 대상으로 이벤트가 적용되지 않는다.

해결 방법으로는 아래와 같이 사용하면 된다.

$(document).on("click", "#id", function(){
	//구현내용
});

원인은 $(document).ready를 사용해서인것 같다.

 

 

기존 제이쿼리 이벤트 대처 방법

---

이 경우는 다음 경우에 대한 대처 방법이다.

기존의 제이쿼리 이벤트를 다음과 같이 여러 대상에 사용하고 있었다고 가정하자. 제이쿼리는 다음과 같이 여러 대상으로 이벤트 작업을 할 수 있다. 하지만 동적페이지로 변경하는 순간 이 이벤트도 동작하지 않을 것이다.

$('#id1, #id2...').click(function(){
	//구현내용
})

 

$(document)를 사용하고 있어 이전처럼 여러 대상을 지정을 못한다. 이때는 event 객체를 사용하여 제어를 한다.

기존에 클릭 이벤트로 id1과 id2를 제어한다고 가정했을 때 event의 target으로 해당 id를 판별하여 제어가 가능하다.

    $(document).on({
        click: function (e) { 
            console.log(e.target);
        }
    });

다음과 같이 코드를 작성해서 클릭을 해보면 클릭 대상에 대한 정보가 콘솔에 찍힐 것이다. 해당 객체를 확인하여 id값이든 필요한 정보를 가져다 쓰면 된다.

 

당연 구현에서는 if문을 통해서 기본 클릭 대상인 id1과 id2에서만 동작하도록 구현하면 된다.