자식요소 이벤트를 사용하기 위해 부모요소 이벤트를 막는 방법
이처럼 큰 네모박스(article) 을 클릭하면 '일정 상세보기' 페이지로 가게끔 jQuery를 걸어놨지만,
큰 네모박스(article) 안에 'X버튼' 또는 '일정 수정하기' 또는 '게시물로 공유하기' 와 같이 자식요소를 클릭하면 그에 맞게 이벤트가 걸려야하는데,
jQuery를 잘 잡아도 부모요소의 이벤트인 '일정 상세보기' 페이지로 넘어가더라.
이에 대한 해결방법은, 자식요소에 e.stopPropagation(); 사용하기 !
* 사용방법 *
1. HTML <body> 내부
1 2 3 4 5 6 7 8 9 10 11 | <article class="${schedule.scheduleNo}"> <!-- 썸네일 형식의 작성한 글 이미지 --> <div class="thumbImg" style="width:auto; height:250px;"> <img src="/images/schedule/${schedule.scheduleImg}" class="img-thumbnail"> </div> <!-- 마우스 오버시 보여지는 부분 --> <div class="links" style="text-align:center;"> <button type="button" class="btn btn-default" id="updateSchedule${schedule.scheduleNo}">일정 수정하기</button> <button type="button" class="btn btn-warning" id="addBoard${schedule.scheduleNo}">게시물로 공유하기</button> </div> </article> | cs |
2. jQuery 부분
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //일정 클릭시 일정 상세보기로 이동하는 스크립트 $("article").on("click", function(){ self.location="/schedule/getSchedule?scheduleNo="+$(this).attr("class"); }) //게시물로 공유 $("button[id^='addBoard']").on("click", function(e){ e.stopPropagation(); var scheduleNo = $(this).attr("id").replace(/[^0-9]/g,""); $.ajax({ url : "/board/json/addBoard/"+scheduleNo, method : "POST", success : function(data){ swal("글쓰기 완료!", "마이페이지 내 작성한 글 보기에서 확인가능합니다!", "success"); $("#addBoard"+scheduleNo).css("display","none"); } }) //e.o.ajax }) | cs |
참고 사이트 : http://webie.tistory.com/123
반응형
'Frontend > jQuery' 카테고리의 다른 글
| [Javascript/jQuery] 현재 페이지 URL 가져오기 (0) | 2019.09.09 |
|---|---|
| jQuery 로 특정 태그가 존재하는지 확인하는 방법 (0) | 2019.05.30 |
| [jQuery/Bootstrap] 동적으로 생성한 요소에 tooltip 바인딩 시키기 (0) | 2018.07.23 |
| 화면 내리면 최상단으로 이동할 아이콘 뜨고, 맨 위에 있으면 아이콘 사라지게 하기 (0) | 2018.07.13 |
| [jQuery] 동적으로 추가한 요소에 이벤트 걸기 (event binding) (0) | 2018.07.10 |
댓글