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 个答案: