웹페이지에서 버튼을 한번 클릭했는데 클릭 이벤트가 여러번 반복되 실행되는 경우가 있다.
동적(Dynamic) 으로 추가된 페이지내에 이벤트를 추가했을 경우, 해당 페이지가 추가될 때 마다 이벤트리스너가 추가되므로, 동일한 이벤트가 한 페이지내 점점 늘어나는 현상이 발생한다.
동적으로 추가되는 페이지내에는 이벤트를 넣지 말것 (상위 페이지에 이벤트)
동적페이지내 셀렉터를 사용하지 않고, 상위 페이지내 셀렉터 하위를 선택하는 방법으로 이벤트를 구현할 것
동적으로 추가되는 페이지내의 이벤트는 반드시 삭제 후 추가하는 방법을 사용할 것
$("셀렉터").on("click", "하위 셀렉터", function() {.....});
$("셀렉터").off("click.식별자").on("click.식별자", "하위 셀렉터", function() {.....});
위 첫번째의 경우, 셀렉터는 부모 페이지의 셀렉터를 선택하고, 하위 셀렉터에 동적으로 추가되는 페이지의 셀렉터를 선택해 접근하면 동적으로 추가된 페이지에 이벤트를 걸어 줄수 있다.
두번째는 위와 동일한 방법에 off를 사용해 동적으로 변경 또는 추가될 때마다 해당 식별자에 해당하는 click 이벤트를 존재하면 삭제하고 추가하는 방식으로 작성한 것
두번째 방법을 채택하면 동적화면에 동일한 이벤트가 무한정 늘어나는 현상을 막을 수 있다.