使用jquery动态创建html元素

Question

使用jquery动态创建html元素

kar*_*yan 0 html javascript css scripting jquery

我需要一种方法来解决这个问题.live()在我使用的jQuery 1.9中被删除.所以现在我不知道如何动态地将元素添加到文档对象模型树中.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Trying dynamic adding</title>
        <style>

            body {
                margin:10%;
            }
            #cool {
                border:5px solid red;
            }
            .fool {
                background-color:red;
                width:100px;
                height:100px;
                border:1px solid green;
            }
            .lol {
                background-color:yellow;
            }

        </style>
        <script src="jquery.js"></script>
        <script>

        $(document).ready(function(){
            alert("Application has been started");
            $('#hool').addClass("lol");
            $('#create').click(function(){
                alert("Element created here");
                var a=$('#cool');
                b="<div class='fool'></div>";
                a.append(b);
                alert("Element created");
                var c=$('.fool');
                c.addClass("lol");
            });
            $('.lol').click(function(){
                alert("New elements are good to go");
                $('.lol').css("background-color","teal");
            });
            function hello(){
                alert("welcome");
            }
        });
        function hello(){
            alert("welcome");
        }

        </script>
    </head>

    <body>

        <section id=cool>

            <button id=create> Create </button>
            <button id=hool>Doubt</button>
        </section>

    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在这段代码中,问题是当我点击带有id的按钮创建时,它正在使用类创建新的分区标记fool.这只与css一起使用而不是与javascript一起使用.例如,带有id的按钮hool和使用类傻瓜创建的新分区标签将被分配给另一个名为的类lol.现在,当我点击按钮时按钮正在工作$('.lol').click(function)正在工作.但是当我按下新创建的标签时,它没有执行该功能.因为在加载页面时添加了按钮,但是动态地使用append方法创建了新的div标签.

现在请有人告诉我如何$('.lol').click(function)通过单击新的div标签来运行.我目前正在做一个项目所以请帮助.欢迎所有答案.提前致谢.

Answer 1

mic*_*lem 5

你应该试试这个:

$(document).on('click', '.lol', function() {
    //do something
});

Run Code Online (Sandbox Code Playgroud)

有关信息,请阅读活动授权

归档时间：	10 年，3 月前
查看次数：	520 次
最近记录：	10 年，3 月前