jQuery Как добавить клик на ul

Question

Я хочу добавить проверенный класс на li, когда пользователи щелкают по нему, используя jQuery. Я написал следующий код, который работает.

HTML

<ul>
    <li class="row">Documents checked</li>
    <li class="row">Documents Verified </li>
    <li class="row">Forwarded to Logistics </li>
    <li class="row">Received by Logistics</li>
</ul>

.checked {
  background: green;
}

jQuery

$(function() {
    $('li.row').on('click', function() {
      $(this).addClass('checked');
    });
});

Это работает, но мне сказали это Это плохая практика и попросили найти лучший способ сделать это. Я делаю следующее, но это не работает.

$(function() {
    $('ul').on('click', function(li) {
      $(li).addClass('checked');
    });
});

Answer 1

используйте этот код для решения вашей проблемы

$(".row").click(function(){
  $(this).toggleClass("change")
})

.change {
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="row">Documents checked</li>
    <li class="row">Documents Verified </li>
    <li class="row">Forwarded to Logistics </li>
    <li class="row">Received by Logistics</li>
</ul>

Answer 2

$(function() {
    $('ul').on('click', function(li) {
      $(li).addClass('checked');
    });
});

это неправильно, потому что вы не можете выбрать li, нажав на вас ul, если вы хотите добавить класс или удалить класс с помощью щелчка, который вы можете использовать (toggleClass) следующим образом

$('li').find(.row).on('click', function() {
      $(this).toggleClass('checked');
    });

, но если вы хотите чтобы просто добавить класс, напишите вот так

$('li').find(.row).on('click', function() {
          $(this).addClass('checked');
        });