11.21_(지도api 테스트 중) ajax로 생성된 html에 jquery 이벤트 걸기

지도api를 사용해서 검색한 결과가 ajax로 html에 추가되어 보여진다.

이거에 대해 처음에는 별로 중요하게 생각안하고

검색 결과가 나왔을 때 <+> 버튼을 click 했을 때, 값을 가져오려고 테스트하고 있는데..........

평소와 같이 아래 코드로 테스트를 하는데 계ㅔㅔㅔ속 안됐다 ㅠ,ㅠ................

$('button.add-place').click(function () {
    alert('plz...');
 });

 

다른 요소들은 다 되는데 ajax로 가져온 요소만 왜 안될까 하다가 혹시,,,,싶어서 검색해봤더니

🔥 ajax로 생성된 html에는 위와 같은 방식으로는 동작하지 않는다고 한다.
      ajax로 html을 생성해준 것이기 때문에 한 번 더 DOM 객체를 읽어줘야 한다.

 

그래서 아래와 같이 jquery 코드를 작성해주니 제대로 동작한다.

$(document).on('click', 'button.add-place', function() {
	alert('clickkkk!');
});

 

 

참고블로그

https://minah-workmemory.tistory.com/4

ajax로 생성된 html 에 동작 이벤트 걸어주기