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

Question

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

조회수 3165회

node.js

ajax

jquery

0

싫어요

        $('#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번 발생합니다. 이런 경우에는 어찌 해야할까요?

KimTaesik 114 points

2016-04-24 02:56:18에 작성됨

댓글 입력

score 2 · Accepted Answer

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

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

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

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

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

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

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