Событие клика не выполняется для курсивного текста в элементе

Question

У меня есть сгенерированный список, прикрепленный к элементу, searchresults. Нажатие на член списка возвращает связанный идентификатор, но не в том случае, если область, по которой щелкнули, находится внутри курсивных тегов.

Вот как выглядит сгенерированный список:

<div id="searchresults">;
  <p id="oppnum248">Some text here (<i>And more here</i>)</p>
  <p id="oppnum786">Some other text here (<i>And here</i>)</p>
  ...
</div>

, и этофрагмент кода jQuery:

$('#searchresults').on('click', '[id^=oppnum]', function(event) {
  var oppID = event.target.id.slice(6);
  ...
});

Нажатие на что-либо курсивом запускает обработчик, но oppID - пустая строка. При удалении курсивных тэгов обработчик возвращает идентификатор для всего текста.

Онлайн-поиск не выявляет ничего релевантного. Как мне изменить мой код?

$('#searchresults').on('click', '[id^=oppnum]', function(event) {
      var oppID = event.target.id.slice(6);
      alert(oppID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchresults">;
      <p id="oppnum248">Some text here (And more here)</p>
      <p id="oppnum786">Some other text here (<i>And here</i>)</p>
</div>

Answer 1

Проблема в том, что event.target будет элементом, по которому щелкнули;в этом случае либо i, либо p. Если он был первым, тогда он не имеет атрибута id, поэтому возвращает пустую строку.

Чтобы исправить это, используйте ключевое слово this в обработчике событий, поскольку оно всегда будет ссылаться на элемент, с которым связан обработчик события, даже если дочерний элемент фактически вызвал событие. Попробуйте это:

$('#searchresults').on('click', '[id^=oppnum]', function() {
  var oppID = this.id.slice(6);
  console.log(oppID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchresults">
  <p id="oppnum248">Some text here (<i>And more here</i>)</p>
  <p id="oppnum786">Some other text here (<i>And here</i>)</p>
</div>