동적으로 생성한 엘리먼트에 클릭이벤트 적용

$(document).on("click", ".reviewbody>tr", function() {

$(document).on("click", ".reviewbody>tr", function() {
            
            }
        });

현재의 코드는 동적으로 생성한 코드에 이벤트를 적용시키는것이다.

원래는 $(document).ready()를 사용

문제 $(document).ready()

$(document).ready()를 사용하여 코드를 사용했을때
이벤트가 적용이 될때가 있고 안될때가 있엇다.

1

처음에는 $(document).ready()안에 똑같은 동작을하는 함수를 만들어 적용해보았다.

똑같다.. 이전과같이 될때가 있고 안될때가 있었다..

2

구글링 결과 $(document).on() 발견
ready()와는 다르게 on()은
DOM트리위에 바인딩이 되어 동적으로 생성한 코드도 적용이 된다고 한다.

결과 안된다...

3 해결!

$(document).on("click", ".reviewbody>tr", function()
기존의 코드와 다르게 document 안에 적용을 하는 것이 아닌
document자체에 박아버렷다.

결과
너무 잘된다.

후기

처음 문제를 발견하기까지 오래걸렷다.
애초에 test할때도 너무잘되었고
아무런 문제가 없었으나.
어느순간부터 똑같은 환경 똑같은 코드 똑같은 서버이라도
새로고침하면 동작을 할때도 있고 안할때도 있엇다.
처음 단계에선 아예 문제가 뭔지를 몰라
그냥 코드자체가 잘못되었나? 20분동안 썻다..지웟다.. 반복
그러다가 document 안에 함수가 되어있길래
document관련 함수를 구글링
처음 ready를 쓰다가 on을 발견
서로의 다른점을 찾고 on을썻지만 똑같은 결과..
하지만 on에 인자값을 줘서
document 내에 처음부터 적용이 가능하다고 한다...
해결완료.. 웹을 코딩하면서 처음으로 2시간동안 하나의 문제때문에 고민하기는 처음이었다.
문제가 뭔지도 몰랐고.. 이유도몰랏고...
덕분에 dom(문서 객체 모델)을 공부했다..

좋은 웹페이지 즐겨찾기