Событие Click не работает для динамически генерируемого идентификатора элемента span

Question

Я работаю над проектом «Задача».

Здесь я добавил элементы динамически, а также сгенерированные элементы и динамически. Но когда я хочу удалить элементы, щелкнув элемент span.

Этот щелчок не работает.

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

  $("[id^=remove_]").click(function() {
    alert("working");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="task-list">
<li class="task" id="item_1"><span class="delete-todo" id="remove_1">X</span><span class="main-task">3232</span></li><li class="task" id="item_2"><span class="delete-todo" id="remove_2">X</span><span class="main-task">djkhjsh</span></li>
<li class="task" id="item_3"><span class="delete-todo" id="remove_3">X</span><span class="main-task">snsajdsakm</span></li><li class="task" id="item_4"><span class="delete-todo" id="remove_4">X</span><span class="main-task">sahgsabsa\</span></li>
<li class="task" id="item_5"><span class="delete-todo" id="remove_5">X</span><span class="main-task">sjghjdsn</span></li>
</ul>

Я пробовал это. Но это не работает. Может кто-нибудь объяснить мне, почему он не работает.

NB: Я пробовал несколько решений, найденных на SO.

Answer 1

Делегируйте события тегу-предку, который является общим для всех интерактивных тегов. Таким образом, можно щелкать любые теги, вложенные в тег предка, (включая теги, которые добавляются динамически позже). Чтобы точно определить выбранный тег, $(this) всегда указывает на тег, на котором пользователь щелкнул в данный момент (в данном случае this = event.target = «текущий выбранный тег» ). Используя этот шаблон, #id является бессмысленным и .class более эффективным и универсальным селектором.

Анотомия jQuery делегирование события

//$('ancestor-selector').on('event', 'target-selector', callback);

<ul class="list">
  <li class="task"><b class="delete">X</b>Item</li>
  <li class="task"><b class="delete">X</b>Item</li>
  <li class="task"><b class="delete">X</b>Item</li>
</ul>

$('.list').on('click', '.delete', deleteTask);

---

Демо

Подробности прокомментированы в демоверсии

/*
Delegate the click event (ie .on('click',...)) to the 
ancestor tag (ie .list) of all clickable tags (ie .delete)

NOTE: callback function (ie deleteTask) does NOT have "()" because
it is called when the event is triggered. deleteTask() would be
triggered immediately (which is not desired)
*/
$('.list').on('click', '.delete', deleteTask);

/*
Although this callback function doesn't use the event object,
it is passed by default and it's just a personal habit of mine to
always include it when defining a callback/event handler.

$(this) | in this case points to the tag the user clicked
(aka event.target)

.closest('.task') | will traverse up the DOM to find the first tag 
matching .task

.remove() | self explanitory
*/
function deleteTask(event) {
  $(this).closest('.task').remove();
}

/*
This code is to dynamically add items to list for demonstration
purposes and is not required as part of the solution to OP question
*/
$('.add').on('click', function(event) {
  $('.list').append(`<li class='task'><b class='delete'>X</b> Dynamically added list item</li>`);
});

.delete {
  display: inline-block;
  padding: 1px 3px;
  cursor: pointer
}

<ul class="list">
  <li class="task"><b class="delete">X</b> 1010</li>
  <li class="task"><b class="delete">X</b> 2929</li>
  <li class="task"><b class="delete">X</b> 3838</li>
  <li class="task"><b class="delete">X</b> 4747</li>
  <li class="task"><b class="delete">X</b> 5656</li>
</ul>

<!--
This button is to dynamically add items to list for demonstration
purposes and is not required as part of the solution to OP question
-->
<button class='add'>ADD</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Выберите кнопку удаления по классу, а не по идентификатору. И измените код для использования метода .on (), который привязан к документу, чтобы все элементы можно было выбрать следующим образом:

$(document).on('click', '.delete-todo', (function() {
    alert("working");
});

Answer 3

Я попытался запустить фрагмент кода, который вы прикрепили.

1. когда я только что щелкнул мышью по элементу span 'X' событие нажатия срабатывает
2. когда я щелкнул мышью по всему элементу li, событие щелчка не запускается, потому что вы определили свой щелчок событие только для элемента span Некоторые альтернативы для запуска события клика с использованием идентификатора:

$("#id").click(function(){
 alert('working');
})