Javascript 使用jquery动态创建html元素_Javascript_Jquery_Html_Css_Scripting

Javascript 使用jquery动态创建html元素

javascript jquery html css scripting

Javascript 使用jquery动态创建html元素,javascript,jquery,html,css,scripting,Javascript,Jquery,Html,Css,Scripting,我需要一个解决这个问题的方法live（）在我使用的jquery1.9中被删除。所以现在我不知道如何动态地将元素添加到文档对象模型树中 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Trying dynamic adding</title> <style> bo

我需要一个解决这个问题的方法

live（）

在我使用的jquery1.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>


尝试动态添加
身体{
利润率：10%；
}
#酷{
边框：5px纯红；
}
.傻瓜{
背景色：红色；
宽度：100px；
高度：100px；
边框：1px纯绿色；
}
哈哈{
背景颜色：黄色；
}
$（文档）.ready（函数（）{
警报（“应用程序已启动”）；
$（'#hool'）.addClass（“lol”）；
$（“#创建”）。单击（函数（）{
警报（“在此创建的元素”）；
变量a=$（“#酷”）；
b=“”；
a、 附加（b）；
警报（“已创建元素”）；
变量c=$（'.fool'）；
c、 addClass（“lol”）；
});
$（'.lol'）。单击（函数（）{
警惕（“新元素好用”）；
$（'.lol'）.css（“背景色”、“蓝绿色”）；
});
函数hello（）{
警惕（“欢迎”）；
}
});
函数hello（）{
警惕（“欢迎”）；
}
创造
怀疑

在这段代码中，问题是当我单击id为create的按钮时，它正在使用class

dool

创建新的分区标记。它只使用css而不使用javascript。例如，id为

hool

的按钮和用class fool创建的新分区标记被分配给另一个名为

lol

的类。现在，当我单击按钮

$（'.lol'）时，按钮正在工作。单击（函数）

正在工作。但当我按下新创建的标签时，它并没有执行该函数。因为按钮是在加载页面时添加的，但是新的div标记是使用append方法动态创建的

现在请有人告诉我如何运行

$（'.lol'）。通过单击新的div标记单击（函数）

。我目前正在做一个项目，所以请帮助。欢迎所有答案。提前感谢。

您应该尝试以下方法：

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

有关信息，请阅读

尝试使用like

当然，处理程序不会绑定到事件，因为在您尝试绑定它们时元素还不存在，所以解决方案是在创建元素后绑定处理程序，如下所示：

   $('#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");
        c.click(function()
        {
            alert("New elements are good to go");
            $('.lol').css("background-color","teal");
        });
    });

因为您已经在创建新元素后绑定了处理程序。

问题在于，当您试图选择“.lol”元素以便将单击事件侦听器附加到该元素时，该元素还不存在。您需要在它存在后选择它，可能在创建它或使用它的同一个函数中。要使用事件委派，请将

$（'.lol'）。单击（function（）

为

$（'#cool'）。在（'click'，'.lol'，function（）

上，根据您所选的文档，它不应该是$（'.#cool'）。在（'.lol'，click'，function（）{//do something}）上；应避免这种情况，在文档树顶部附近附加许多委派事件处理程序可能会降低性能。每次事件发生时，jQuery必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为获得最佳性能，请附加委派事件在尽可能靠近目标元素的文档位置。避免对大型文档上的委托事件过度使用document或document.body。答案与我的答案相同创建元素后绑定处理程序，请查看我的答案。

   $('#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");
        c.click(function()
        {
            alert("New elements are good to go");
            $('.lol').css("background-color","teal");
        });
    });

$('.lol').click(function()
{
    alert("New elements are good to go");
    $('.lol').css("background-color","teal");
});