Невозможно получить JS до пузыря

Question

У меня есть структура, как в этой скрипке: https://jsfiddle.net/Arne651/s8wbeyh5/11/

<ul id="ul">
  <li class="test">
    <p>
      Some text
    </p>
  </li>
  <li class="test">
    <p>
      Some text
    </p>
  </li>
  <li class="test">
    <p>
      Some text
    </p>
  </li>
</ul>

У меня есть событие в элементе <ul>, в котором я пытаюсь сделайте что-нибудь с выбранным элементом <li>. Этот элемент <li> содержит элемент <p>, и событие, похоже, не всплывает вверх.

let ul = $("#ul")
ul.on("click", function(e) {
    let clicked = $(e.target)
    console.log(clicked)
    if (clicked.hasClass("test")) {
        console.log("li triggered")
    }
})

Мне не нужны события для всех элементов <li>, потому что список может быть довольно длинное и единичное мероприятие кажется более аккуратным.

Answer 1

При нажатии на текст целью является тег p.

Получение ближайшего li может быть не лучшим способом сделать это, но это работает.

ul.on("click", function(e) {
    let clicked = $(e.target).closest('li');
    console.log(clicked);
    if (clicked.hasClass("test")) {
        console.log("li triggered");
    }
});

Answer 2

можно добавить щелчок по li только попробуйте это

let li = $("#ul li.test")
li.on("click", function(e) {
  console.log("li triggered");
})

Сначала я извлекаю все li, у которых есть проверка calse, затем добавляю к ним слушателя.