主页 / 问题 / 1423230
Accepted
Igor Biyar
Asked:2022-08-23 21:41:45 +0000 UTC2022-08-23 21:41:45 +0000 UTC

.on('click') 不工作 - jQuery

  • 772

我正在做一个列表过滤器，过滤器后列表上的点击不起作用。

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

javascript html

1 个回答

  1. Best Answer

    单击动态添加到 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>

    • 4

相关问题