제이쿼리 클릭 이벤트 후 화면이 새로고침돼요

김예쁨 2025.06.15

답변해주신 모든 분들 감사합니다~^^

주리 2025.06.15

저도 설명만으로는 잘 이해가 안 되네요.
클릭 이벤트가 원래대로 돌아온다는 말이나 새로고침된다는 부분을 조금 더 구체적으로 알려주시면 도움이 될 것 같아요.
샘플 페이지를 보여주셔도 좋고요.

보단 2025.06.15

다시 클릭하면 selected가 빠져야 하는 제이쿼리라서요ㅠㅠ

흰추위 2025.06.15

새로 추가된 요소에 클릭이나 바인드 이벤트를 걸면 이벤트가 적용되지 않을 수 있어요.
제이쿼리의 on을 사용하면 이런 경우에도 이벤트를 연결할 수 있습니다. 이벤트 객체를 매개변수로 받는 방식도 알아두면 도움이 될 것 같아요.
이벤트 연결 코드와 기능을 분리해두는 방법도 생각해보세요.

한란 2025.06.15

click이나 load 이벤트로 시작하는 코드에서도 문제가 생기는 경우가 있어요.
같이 공부하는 입장에서 이런 방식도 살펴보시라고 말씀드려요.

코이 2025.06.15

제가 잘 아는 건 아니지만, bind나 live, delegate가 왜 나뉘어 있었고 on으로 통합됐는지 알아보면서 이해하는 데 도움이 됐어요.
예를 들어 처음에는 요소가 몇 개 없다가 나중에 요소를 추가하는 상황을 생각해보면, bind를 쓸 때 추가된 요소에는 이벤트가 적용되지 않을 수 있어요.

후예 2025.06.15

click(function(e))가 어떤 점에서 좋지 않다는 말씀이신지 궁금해요.
이벤트를 매개변수로 전달하지 않으면 이벤트 정보를 어떻게 받는지도 궁금합니다.
on으로 이벤트를 연결하는 방식과 차이를 말씀하신 건지, 이유도 알려주시면 좋겠어요.

애교 2025.06.15

코드를 이런 식으로 작성하셨다는 말씀이신가요?
$(document).ready(function(){
$("div.hover").on("click", ...);
});

찬누리 2025.06.15

네ㅠㅠ 클릭하면 새로고침되는 상태예요.
$("div.hover").click(function (e) {
$(this).toggleClass("selected");
});
이런 식으로 div를 클릭했을 때 selected 클래스를 추가하려는데, 잠깐 바뀌었다가 바로 원래대로 돌아와요ㅠㅠ

아리솔 2025.06.15

클릭했을 때 F5를 누른 것처럼 새로고침된다는 뜻인가요?
이벤트가 원래대로 돌아온다는 상황이 조금 모호해서요. 작성한 코드를 보여주시면 이해하기 쉬울 것 같아요.