gpt4 book ai didi

javascript - 在元素删除自身并再次追加自身后将事件添加到元素

转载 作者:行者123 更新时间:2023-12-03 00:31:29 24 4
gpt4 key购买 nike

当我点击按钮和alert()时,我尝试删除它,然后该函数将在搜索高级的遗产后将“相同”按钮附加到容器div,我尝试使用 on()/live()/delegate()/不幸的是它们不起作用。

<body>
<div id="container"></div>
<hr>
<button onclick="clicked()">Other one</button>
<hr>
</body>
<script>
$(document).ready(function(){
var i = 0;
$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!</button>");
$("[id='btn_sub']").delegate(this,"click",function(){
$("#container").empty();
$("#container").append("<button id='btn_sub' onclick='clicked()'>Click Me!"+i+"</button>");
i++;
});//tried click/on click/live
});
function clicked(){
alert(1);
}
</script>

最后,在这个例子中,$(document).ready()中的clicked函数和alert部分起作用了。

还有其他方法可以达到同样的效果吗?为什么 on()/live()/delegate()/不起作用?

谢谢。

最佳答案

首先,$("[id='btn_sub']")可以替换为$("#btn_sub"),那么实际上最好使用类,因为您可能有很多按钮。

这是一个作为说明的工作示例:https://codepen.io/antoniandre/pen/XoNNpO

$(document).ready(function(){
$("#container").on("click", '.btn_sub', function() {
removeButton(this);
});
});
function addButton() {
$("#container").append("<button class='btn_sub'>Delete Me!</button>");
}
function removeButton(btn) {
btn.remove();
}

With the on() bound on the container, you actually make sure any matching button .btn_sub will get this event attached to them when they are created in the future.

Regarding live, it does the same as on but is now deprecated so you can forget it. https://api.jquery.com/live/#live-events-handler

关于javascript - 在元素删除自身并再次追加自身后将事件添加到元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53844268/

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