javascript - 单击时，如果有类则发出警报，否则添加类问题

Question

出于某种原因，下面的代码同时触发这两个条件；

所以首先我的 li 没有类，然后单击时添加了“disabled”类，但第一次单击时也会弹出警报？

    $('.select li').on( "click", function() {
    if ( $(this).hasClass('disabled') ) {
      alert("This is disabled");
    }
    else {
      $(this).addClass('disabled');
    }   
    });

如果第一次单击时该类尚不存在，则应添加该类，然后，如果再次单击，则应弹出警报，表明此 li 已禁用该类

Answer 1

我认为您的事件监听器被触发两次，因为单击事件首先触发了 <li> ( e.target )，然后事件返回到 ul.select (e.currentTarget)。您需要将点击事件委托(delegate)给列表，并在事件数据参数中指定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>