이런 종류의 HTML이 있습니다.
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
</div>
</div>
</section>
</div>
이제 여기에서 클릭 할 div의 div 클래스를 캡처하고 싶습니다.
내가 시도하는 기능은 있지만 예상대로 작동하지 않습니다. 첫 번째 div 클래스 만 계속 제공합니다.
$(document).ready(function () {
$('.outerDiv').click(function () {
alert($(this).attr('class'));
});
});
문제는 선택자에 관한 것입니다. 그리고 선택기를 열면 모든 부모가 동일한 이벤트를 발생시키지 않도록 전파를 중지해야합니다.
이 시도:
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= @website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= @website.background_image.present? ? @website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<a href="#" class="button button-border button-light button-rounded button-reveal tright button-large topmargin hidden-xs"><i class="icon-angle-right"></i><span>Start Tour</span></a>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.outerDiv, .outerDiv div').click(function (e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
</script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다