gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 02:00:46 24 4
gpt4 key购买 nike

我见过其他应该回答我的问题,但由于某种原因,他们没有。我指的是这些:
-jquery click event not firing?
-jquery functions dont work on dom elements loaded asynchromously

我首先使用click()尝试将选定的“li”的颜色更改为粉红色。它有效,但不适用于动态 append 的“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>

有人知道吗?
非常感谢!

最佳答案

您需要使用事件delegation基于.on()

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

演示:Fiddle

关于jQuery 单击不会触发异步添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15736425/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com