.on('click') не работает - jQuery

Question

Я делаю фильтр списка и после фильтра на список не работают нажатия.

$("button").click(function(){
    let list = [];
    $(".list li").each(function(){
        list.push($(this));
    });

    $(".list").empty();

    list.sort( (a , b) => (a.text()) - (b.text()) );

    list.forEach(element => {
        $(".list").append(element);
    });
});

$("li").on('click',function(){
    alert($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <button> start </button>
    <ul class="list">
        <li> 3 </li>
        <li> 2 </li>
        <li> 1 </li>
    </ul>
</div>

Answer 1

Клик на динамически добавленные в DOM элементы не работает - нужно обрабатывать его через делегирование:

$("button").click(function(){
  let list = [];
  $(".list li").each(function(){
    list.push($(this));
  });
  
  $(".list").empty();

  list.sort( (a , b) => (a.text()) - (b.text()) );

  list.forEach(element => {
    $(".list").append(element);
  });
  
});

$(document).on('click', 'li',function(){
  alert($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button> start </button>
  <ul class="list">
    <li> 2 </li>
    <li> 3 </li>
    <li> 1 </li>
  </ul>
</div>

БЛОГ НА HUSL

.on('click') не работает - jQuery

Ответы (1 шт):