event.stopPropagation(); 질문!
관련링크
http://제이쿼리
79회 연결
본문
안녕하세요! 방금도 글올렸었는데 제가 해결못한부분이 있어가지고 ...
각 영역에 클릭이벤트를 해줘야하는데 그안에 있는 .card_detal__btn 여기에도 클릭이벤트를 해주어야합니다.
그래서event.stopPropagation(); 이함수를 써서 해결했습니다.
문제는 이 함수가가 첫번째카드에만 먹고 나머지는 먹히지 않습니다 .
순서가 문제인지 아니면 다른방법이 있는지 도움 부탁드립니다 ! ㅠㅠ
$(document).ready(function(){
$(".card_detal__btn").click(function(){
event.stopPropagation();
var submenu = $(".media-content__detail");
if( submenu.is(":visible") ){
$(".card_detal__btn").css("transform","rotate(0deg)");
submenu.slideUp();
}else{
$(".card_detal__btn").css("transform","rotate(180deg)");
submenu.slideDown();
}
});
});
<section class="container is-max-desktop afms-wrap afms-wrap__input">
<div class="pt-5">
<div class="box afms-box" onClick="">
<article class="is-relative">
<div class="media-content mb-3">
<div class="content mb-3">
<div class="is-flex is-align-items-center">
<span class="afms_tag1">영선</span>
<span class="card_title mt-0 ml-1">정기회의 회의록</span>
<a class="card_arrow" id="arrowBtn">
<span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
</a>
</div>
<p class="has-text-grey-light mt-1">HOW0021-A1</p>
</div>
<div class="content is-inline-block mr-5 mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
</p>
</div>
<div class="content is-inline-block mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
</p>
</div>
</div>
<div class="media-content media-content__detail mb-3 hide">
<table class="table is-fullwidth has-text-centered">
<thead>
<tr>
<th>위치</th>
<th>세부위치</th>
<th>수량</th>
<th>수량</th>
</tr>
</thead>
<tfoot>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
<div class="box afms-box" onClick="">
<article class="is-relative">
<div class="media-content mb-3">
<div class="content mb-3">
<div class="is-flex is-align-items-center">
<span class="afms_tag1">영선</span>
<span class="card_title mt-0 ml-1">정기회의 회의록</span>
<a class="card_arrow" id="arrowBtn">
<span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
</a>
</div>
<p class="has-text-grey-light mt-1">HOW0021-A1</p>
</div>
<div class="content is-inline-block mr-5 mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
</p>
</div>
<div class="content is-inline-block mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
</p>
</div>
</div>
<div class="media-content media-content__detail mb-3 hide">
<table class="table is-fullwidth has-text-centered">
<thead>
<tr>
<th>위치</th>
<th>세부위치</th>
<th>수량</th>
<th>수량</th>
</tr>
</thead>
<tfoot>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
<div class="box afms-box" onClick="">
<article class="is-relative">
<div class="media-content mb-3">
<div class="content mb-3">
<div class="is-flex is-align-items-center">
<span class="afms_tag1">영선</span>
<span class="card_title mt-0 ml-1">정기회의 회의록</span>
<a class="card_arrow" id="arrowBtn">
<span class="iconify card_detal__btn" data-icon="bi:chevron-down" style="font-size: 28px; color: #000;"></span>
</a>
</div>
<p class="has-text-grey-light mt-1">HOW0021-A1</p>
</div>
<div class="content is-inline-block mr-5 mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">합계수량</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">2,795㎡</span>
</p>
</div>
<div class="content is-inline-block mb-0" >
<p class="card_detail">
<span class="tit has-text-black-bis is-block">권장 내구연한</span><span class="txt is-block" style="font-size: 15px; font-weight: 800">10년</span>
</p>
</div>
</div>
<div class="media-content media-content__detail mb-3 hide">
<table class="table is-fullwidth has-text-centered">
<thead>
<tr>
<th>위치</th>
<th>세부위치</th>
<th>수량</th>
<th>수량</th>
</tr>
</thead>
<tfoot>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
<tr>
<td>201동</td>
<td>복도</td>
<td>15,000㎡</td>
<td><span class="afms_tag1 detailBtn">상세</span></td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</div>
</section>
답변 2
먹히지 않다는"는 상황이
구체적으로 무엇인지 알면 좋겠군요.
event.stopPropagation();j
다음에
console.log('here...');
추가해서
콘솔 창에 이 메시지가 나오는지 확인해 보세요.
가끔은 레이어 겹치는 문제로 버튼 이미지가 클릭 자체가 안 되는 경우가 있는데 이걸 확인해 보는 방법입니다.
질문이 잘 이해가 안가네요.
element 에 selector를 지정하여 click 이벤트를 받는데
그 element 내부에있는 자식요소에도 click 이벤트가 지정되어 있어서
자식 element 클릭시에도 부모 element 의 스크립트가 동시에 동작한다는건가요?
그럼 event.stopPropagation(); 빼버리시고
해당 셀렉터 스크립트 종료단에 return false; 넣으시면 될듯한데요.
답변을 작성하시기 전에 로그인 해주세요.
