3

我见过其他应该回答我的问题，但是由于某种原因，他们没有。我指的是这些：
- jquery click 事件没有触发？
- jquery 函数不适用于异步加载的 dom 元素

我首先使用 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>

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

4

1 回答 1

13

您需要使用基于.on()的事件委托

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

演示：小提琴

于 2013-04-01T01:25:55.783 回答