2

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

$("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>

3
  • что значит "не работают"? а какое поведение Вы ожидаете дальше, после повторного нажатия? 23 июн 2022 в 13:54
  • alert($(this).text());
    – Igor Biyar
    23 июн 2022 в 13:57
  • а, я понял, про какой клик речь - сейчас отвечу Вам 23 июн 2022 в 14:08

1 ответ 1

4

Клик на динамически добавленные в 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>

1
  • 1
    Спасибо за ответ , я понял как оно уже работает.
    – Igor Biyar
    23 июн 2022 в 14:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.