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

Question

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

怎么可能解决这个问题？

@UPDATE 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>

Answer 1

只需为您的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>

Answer 2

上下文“this”没有设置属性ID。

Answer 3

有用！ 有没有办法获得元素值？

是的，例如用jquery

$(this).attr('value');

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

问题描述

3 个解决方案

解决方案1
3 已采纳 2018-11-04 17:28:18

解决方案2
0 2018-11-04 17:27:44

解决方案3
0 2018-11-04 18:03:22

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2018-11-04 17:28:18

解决方案2 0 2018-11-04 17:27:44

解决方案3 0 2018-11-04 18:03:22

解决方案1
3 已采纳 2018-11-04 17:28:18

解决方案2
0 2018-11-04 17:27:44

解决方案3
0 2018-11-04 18:03:22