Question

我已经看到了应该回答我的其他问题，但出于某种原因，他们没有。我指的是这些：
- jquery click event not firing?
- jquery functions dont work on dom elements loaded asynchromously

我首先使用click（）尝试将所选“li”的颜色更改为粉红色。它有效，但不适用于动态附加的“li”。我尝试使用on（），因为live（）现已弃用。我很惊讶它仍然没有用。

这是您可以运行的示例：

使用Javascript：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("ol").append("<li class='test'> Appended item </li>");
  });
});
</script>

<script>
$(function () {
  $('.test').on('click', function () {
    $(this).css("background-color","pink");
  });
});
</script>

HTML：

<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
  <ol>
    <li class='test'> List item 1 </li>
    <li class='test'> List item 2 </li>
    <li class='test'> List item 3 </li>
  </ol>

  <button id="btn1">Append list item</button>
</body>

有没有人有线索？非常感谢！

Answer 1

您需要根据delegation

使用事件.on()

$('ol').on('click', '.test', function(el){
    $(this).css("background-color","pink");
})

演示：Fiddle

jQuery单击不触发异步添加的元素

1 个答案: