html에서 <script src="/js/chatEx01.js"></script> 있고
, chatEx01.js 에 있는 $(".loginBtn").on("click", function() { } );이 작동하지 않는 이유
>> 2번에서 $(document).ready() 써서 해결함
1. jQuery가 로드되지 않음
문제:
$ 기호는 jQuery 라이브러리를 의미. jQuery가 로드되지 않으면 $는 정의되지 않아 클릭 이벤트가 작동하지 않습니다.
2. DOM이 완전히 로드되지 않은 상태에서 실행됨
문제:
스크립트가 실행될 때 DOM이 아직 로드되지 않아서 .loginBtn 요소를 찾을 수 없을 수 있다.
해결 방법:
$(document).ready()를 사용하여 DOM이 완전히 로드된 후 이벤트를 바인딩해야 합니다.
$(document).ready( function() {
})
3. <script> 태그 위치 문제
문제:
HTML의 <script src="/js/chatEx01.js"></script> 태그가 <head> 태그 안에 위치하면 DOM이 로드되기 전에 실행될 수 있습니다.
해결 방법:
<script> 태그를 </body> 태그 바로 위로 이동하세요.
4. 이벤트 위임 처리 (동적 요소의 경우)
문제:
.loginBtn 요소가 페이지 로드 후에 동적으로 추가되었다면 기존의 on("click") 바인딩이 적용되지 않습니다.
해결 방법:
$(document).on("click", ".loginBtn", function() {
alert("로그인 버튼 클릭!");
});
5. 스크립트 캐시 문제
문제: 브라우저가 오래된 chatEx01.js 파일을 캐싱하고 있을 수 있다.
'Programing Language > JavaScript' 카테고리의 다른 글
| new StompJs.Client( ) (1) | 2025.01.26 |
|---|---|
| 브라우저 렌더링 과정과 window.onload = () => { } , $(document).ready( ) (1) | 2025.01.21 |
| [ JS ] WebSocket 객체 (1) | 2025.01.14 |
| setTimeout() (1) | 2023.05.17 |
| 선택자 document.getElementById( ) , $( ) (0) | 2023.05.16 |