如何获得选定的李值,而不是父李值
问题描述:
在点击2级李的我想获得特定的李值。如何获得选定的李值,而不是父李值
<li><span class="classSpan"> Level
<ul>
<li> <span class="classSpan"> Level 1 Item 1
<ul>
<li><span class="classSpan">Level 2 Item 1</span</li>
<li><span class="classSpan">Level 2 Item 2</span</li>
</ul>
</span>
</li>
</ul>
</span>
</li>
以下事件将触发3倍,而不是一次(火对所有的父母)。它只能射击一次,仅适用于选定的锂。
$('.classSpan').click(function (e) {
alert('click')
});
答
这是因为事件冒泡/传播父项。使用e.stopPropagation()
到冒泡和触发额外的事件回调停止:
$('.classSpan').click(function (e) {
e.stopPropagation();
console.log('click')
});
证明的概念:
$(function() {
$('.classSpan').click(function(e) {
e.stopPropagation();
console.log('click')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span class="classSpan">
Level
<ul>
<li>
<span class="classSpan">
Level 1 Item 1
<ul>
<li><span class="classSpan">Level 2 Item 1</span></li>
<li><span class="classSpan">Level 2 Item 2</span></li>
</ul>
</span>
</li>
</ul>
</span>
</li>
</ul>
一些提示:
- 你可能想要修正您的标记:请勿包裹您的
<ul>
在<span>
,但是让它成为兄弟姐妹。 - 停止使用
alert
进行调试:它实际上停止了该线程。改为使用console.log()
,然后打开您的开发人员工具。
+0
谢谢@特里..它的工作.. –
+0
@RajeshShetty请接受特里的答案,如果这是你选择的。 – ProEvilz
答
在这里,你去。你的跨度让他们都在里面。所以当你点击它们时,这会导致点击它。
<li><span class="classSpan"> Level</span>
<ul>
<li> <span class="classSpan"> Level 1 Item 1 </span>
<ul>
<li><span class="classSpan">Level 2 Item 1</span></li>
<li><span class="classSpan">Level 2 Item 2</span></li>
</ul>
</li>
</ul>
</li>
$(document).ready(function(){
$('.classSpan').click(function (e) {
var x = $(this).text()
alert(x)
});
});
答
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256 DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
需要防止当前事件的传播在捕获和冒泡phases.you需要停止e.stopPropagation();
<ul>
<li>
<span class="classSpan"> Level
<ul>
<li>
<span class="classSpan"> Level 1
<ul>
<li><span class="classSpan">Level 1 Item 1</span></li>
<li><span class="classSpan">Level 1 Item 2</span></li>
</ul>
</span>
</li>
</ul>
</span>
</li>
</ul>
脚本
$(function() {
$('.classSpan').click(function(e) {
e.stopPropagation();
var data = $(this).text()
console.log(data + 'your li text get')
});
});
你的HTML只是清楚地打破。你有缺少标签,缺少' ProEvilz