javascript - 使用jquery动态创建html元素

标签 javascript jquery html css scripting

我需要一种方法来解决这个问题。 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>

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

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

最佳答案

你应该试试这个:

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

有关信息,请阅读 Event delegation

关于javascript - 使用jquery动态创建html元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31980574/

相关文章:

html - Div 不清除 float

javascript - 通过 ref 将 $scope.property 注入(inject)工厂实例

javascript - 在 Chrome 中的适当选项卡/窗口中打开 URL

javascript - 使用 jQuery 的表达式引擎样式 url 段

html - 如果我使用 bootstrap,为什么会出现对齐错误?

php - 如何通过 JavaScript 连接到我的 PHP 程序所在的服务器?

javascript - 将 jquery if 语句限制在各自的 div 中

javascript - 如何在 javascript onclick 函数中使用 *this* 并使用 jquery 进行遍历

javascript - jQuery .html() 并注入(inject)内联 CSS 样式?

jquery - Microsoft Azure 认知项目 Oxford Speech API 文本转语音 jQuery REST 示例