node.js에서 ajax로 비동기 페이지 전환 질문입니다.


        $('#myInfoCancel').click(function(e){
            $.ajax({
                type: "post",
                url: "/leftmenu",
                success: function(result,status,xhr){
                    $("#leftSection").html(result)
                },
                error: function(xhr, status, er){}
            });
            e.preventDefault();         
        });

myInfoCancel 버튼을 클릭하면 leftSection에 leftmenu.ejs를

     res.render('account/leftmenu' , { layout:false });

이와 같은 형태로 보내서 뿌려줬습니다. 문제는 페이지를 저렇게 뿌려주니까, 기존에 있던 jquery 이벤트들이 leftSection에 뿌려준 부분을 인식을 못해 아무런 액션도 일어나질 않았습니다.

그래서 leftmenu.ejs 안에다가

    <script src="/javascripts/main.js"></script>

라고 또 다시한번 써 주니까 이제는 액션이 일어나긴 하는데 원래 페이지에 있던거랑 겹쳐서 똑같은 이벤트가 2번 발생합니다. 이런 경우에는 어찌 해야할까요?

  • 2016년 04월 24일에 작성됨
    AWS, node.js, socket.io, mongoDB

조회수 338


1 답변


좋아요
2
싫어요
채택취소하기

문제가 발생하는 근본적인 원인은 Ajax로 html을 가져온 후 $("#leftSection").html(result) 로 추가된 요소에는 이벤트를 설정하지 않았습니다. 그래서 이벤트가 반응하지 않은것 입니다.

그 후에 main.js를 추가하고 이벤트가 2번씩 걸리는 이유는 main.js를 아마 layout.ejs등에서 이미 한번 부르고 있기 때문일 것입니다.

layout 페이지가 로딩 되면서 main.js를 불러서 각 요소들에 이벤트가 설정 되었을 것인데, leftmenu.ejs 에 포함된 main.js가 불리면서 다시 한번 이벤트가 등록되었을 겁니다.

한 요소에 여러번 이벤트가 등록됩니다.

위 문제를 가장 정확하게 해결하는 방법은 Event delegation을 사용하는 것입니다.

동적으로 추가되는 요소에 이벤트를 거는 것이 아니라 추가되는 요소 상위 요소에 이벤트(click 등)를 설정하고 해당 이벤트가 일어났을 때 이벤트 객체에 설정된 srcElementtarget의 속성(id, class 등)을 보고 함수에서 동작을 결정하는 방식입니다.

위 링크를 보고 이해가 안가시면 다시 질문 주세요 :)

  • 2016년 04월 24일에 작성됨
    프로그래밍 언어를 좋아하는 프로그래머

  • 정말 감사합니다!! 이 문제를 해결하면서 다른 문제도 어찌하다가(?) 해결했습니다! 다시한번 감사드립니다!    KimTaesik   2016.4.25 04:33     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close