동적으로 생성된 태그에 이벤트 걸기(event delegation), 링크 막기

1. ajax통신을 통해 아래 ul태그 안에 li태그를 동적으로 만들어줄것이다.(pagination)

2. 페이지가 최초 로딩될때 readstores.do라는 url로 요청을 하여 위의 ul태그에 동적으로 li태그를 만들어준다.

3. 결고 화면은 아래와 같다.

4. 그리고 동적으로 만들어진 소스코드를 보면 아래와 같은데, 현재는 startPage가 1이기 때문에 이전버튼은 disabled 클래스가 적용해놨다.
근데 disabled 클래스를 적용해놨다고 해서 해당 a태그를 클릭했을때 클릭이 저절로 막혀지는게 아니라 UI측면으로만 반영 된것이다. 따라서 diabled클래스를 가진 a태그가 클릭이 되었을때는 클릭이 안되도록 즉  link타고 가지 않도록 javascript쪽에서 처리를 해주어야 한다. 
이는 현재 두 가지 방법이있다.

일단 먼저 아래 처럼 이벤트 위임방식으로 이벤트 핸들러를 정의하는 것이다.
현재 <ul class=pagination></ul> 안에 li와 a태그는 ajax통신 후 동적으로 생성되는 요소이기 때문에 여기에 직접적으로 이벤트 핸들러를 등록 해놓을수가 없다.( 이벤트 핸들러를 구현하는 시점에는 생성되어있지도 않은 요소이기 때문)따라서 이미 생성되어있는 태그나 아니면 아예 그냥 $(document)에다가 이벤트를 등록하고 클릭 이벤트가 실제 일어난 곳으로 찾아가도록 이벤트 위임을 이용하면된다.(아래 밑줄 그은 부분) 

일단 어떤 페이지 번호를 누르더라도 href에 있는 곳으로 link를 타고 가는것이 목적이 아니라 ajax통신을 통해 해당 페이지의 게시글과 페이지네이션을 새로 하는게 목적이기 때문에 a태그를 클릭했을때의 original event를 event.preventDefault(); 해서 막아준다. 그리고 만약 현재 이벤트가 발생한 태그는 a태그이니까 부모태그인 li태그를 선택해서 hasClass("disabled")를 이용해서 disabled라는 클래스가 적용돼있는 li태그인지를 확인해서 맞으면, 마찬가지 original event를 막아주고, 더이상 로직이 진행되지 않도록 return ;을 해주면 된다. 

diabled인 경우가 아니라면 아래 처럼 다시 readstores.do로 요청을하여 리스트와 페이지네이션을 refresh해주면된다.

이와 같이 a태그를 클릭했을때 클릭 이벤트를 막아주는 방법으로는 event.preventDefault()하는 방법이 있다.
다음으로는 사실 아주 간단한 방법이 있다.(자주쓰인다고 함)

아래와 같이 더이상 뒤로 갈 페이지 번호 가 없을때는 Next를 disable시켜주어야한다. 즉 클릭을 해도 아무 일도 일어나지 않으면 된다.

아래와 같이 해당 a태그의 href에 "javascaript:" 를 해주면된다. 무슨말이냐면 a태그를 클릭했을때 javascript: 여기 있는 코드를 수행하라는 의미인데, 아무것도 없으니까 그냥 아무일도 안하는 것이다. 아무튼 이렇게 간편하게 클릭으로 인한 link를 막을 수도 있다.