当文档准备好时，有一个函数在页面上创建一个 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/