gpt4 book ai didi

javascript - 在onclick中获取动态添加元素的id

转载 作者:搜寻专家 更新时间:2023-10-31 08:23:02 27 4
gpt4 key购买 nike

有一个函数可以在文档准备好后在页面上创建一个 html 元素。我必须在该元素上创建 onclick() 事件并在其中使用元素 ID。

我的代码是:

$('document').ready(function(){
addNewElementToContainer();
});

function addNewElementToContainer(){
$("#myContainer").append('<div onclick="myClickEvent(this.id)" value="1" >Click me</div>');
}

function myClickEvent(id){
alert("ID: " + id);
}

id 设置正确(在页面检查器上检查)但结果是错误的 - "ID: "。所以看起来 id 是空的。

如何解决这个问题?

@更新HTML 文件是:

<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div id="myContainer"><div>
</body>

<script>
$('document').ready(function(){
addNewElementToContainer();
});
function addNewElementToContainer(){
$("#myContainer").append('<div onclick="myClickEvent(this.id)" value="1" >Click me</div>');
}
function myClickEvent(id){
alert("ID: " + id);
}
</script>
</html>

最佳答案

只需为您的 Html 元素提供 id 和值,如下所示:

$('document').ready(function(){
addNewElementToContainer();
});
function addNewElementToContainer(){
$("#myContainer").append('<div onclick="myClickEvent(this.id, this)" id="id1" data-value="1" >Click me</div>');
}

function myClickEvent(id, obj){
alert("ID: " + id);
val = obj.getAttribute('data-value');
alert(val);
}
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<div id="myContainer"><div>
</body>
</script>
</html>

关于javascript - 在onclick中获取动态添加元素的id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53143357/

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