innerHtml로 만든 태그에 이벤트 바인딩하기 [JavaScript & html]

이번에 회사에서 업무 중에 외부에서 가져온 소스에 innerHTML로 덕지덕지 만들어 놓은 코드를 보게 되었다..

그런 태그들에 이벤트를 주려고 했는데 나만 그런건지 모르겠는데 검색해도 잘 안나오고 찾기 힘들어서 테스트로 공유하려고 한다

innerHTML로 추가할 태그의 css를 미리 넣어놓은 html

로드되면 testP라는 클래스를 가진 p태그 추가

css까지 잘 반영된 화면

분명 css는 로드된 이후에 잘 들어가는걸 확인할 수 있는데.. 

여기서 밖에서 testP태그의 클래스 이름으로 이벤트를 넣으려고 하면 이벤트가 바인딩되지 않는다.

웃긴건 이후에 console에 찍으면 찍힘

뒤적거려본 결과 돔 생성되고 하는 순서로 인해 안된다는거 같은데

결론만 말하자면 미리 innerHTML 안에 인라인으로 이벤트를 넣어줘야 한다

 

요로코롬

잘 나온다!

 

이게 뭐라고 30분정도 머리썼는데 약간 현타왔다 처음부터 이 방법으로 했다면 당신은 천재...