单击时，如果有类然后发出警报，则添加类问题。
单击时，如果有类然后发出警报，则添加类问题。
提问于 2019-01-08 15:14:30
由于某些原因，下面的代码同时触发了这两个条件；
因此，首先我的li没有类，然后单击“禁用”类被添加，但是第一次单击时也会弹出警报吗？
$('.select li').on( "click", function() {
if ( $(this).hasClass('disabled') ) {
alert("This is disabled");
}
else {
$(this).addClass('disabled');
}
});它应该在第一次单击时添加类如果不存在，那么如果再次单击，则会弹出警报，说明这个li已经禁用了该类。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-08 15:41:43
我认为您的事件侦听器被触发了两次，因为单击事件首先触发了<li> (e.target)，然后该事件又冒泡回ul.select (e.currentTarget)。您需要将单击事件委托给列表，并在事件数据参数中将其指示为li。见演示
演示
$('.select').on('click', 'li', disableItem);
function disableItem(e) {
if ($(this).hasClass('disabled')) {
return console.log('Item is already disabled');
} else {
$(this).addClass('disabled');
return console.log('Item has been disabled');
}
};.select {
list-style: none
}
.select li {
line-height: 1.5;
}
.disabled {
background: rgba(0, 0, 0, 0.2);
}
.as-console-wrapper {
width: 350px;
min-height: 100%;
margin-left: 45%;
}
.as-console-row.as-console-row::after {
content: '';
padding: 0;
margin: 0;
border: 0;
width: 0;
}<ul class='select'>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54094725
复制相关文章
相似问题
腾讯云开发者
