使用jquery动态创建html元素答案

【问题标题】：dynamic creation of html elements using jquery使用jquery动态创建html元素
【发布时间】：2015-11-05 23:15:35
【问题描述】：

我需要一种方法来解决这个问题。 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 的按钮和使用类傻瓜创建的新部门标签被分配给另一个名为lol 的类。现在，当我单击按钮 $('.lol').click(function) 正在工作时，该按钮正在工作。但是当我按下新创建的标签时，它没有执行该功能。因为按钮是在页面加载时添加的，但是新的 div 标签是使用 append 方法动态创建的。

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

【问题讨论】：

元素创建后绑定handler，看我的回答。

标签： javascript jquery html css scripting

【解决方案1】：

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

   $('#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");
        });
    });

我所做的是在单击#create 时将绑定事件直接绑定到创建的元素。

删除这一行：

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

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

【讨论】：

【解决方案2】：

你应该试试这个：

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

详情请阅读Event delegation

【讨论】：

根据你链接的文档不应该是 $('#cool').on('.lol', 'click', function() { //do something });
应该避免这种情况，在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免过度使用 document 或 document.body 来处理大型文档的委托事件。

【解决方案3】：

问题在于，当您尝试选择“.lol”元素以便为其附加点击事件侦听器时，它还不存在。您需要在它存在后选择它，可能在您创建它的同一函数中或使用event delegation。要使用事件委托，请将 $('.lol').click(function() 更改为 $('#cool').on('click', '.lol', function()

【讨论】：

是的，和我的答案一样

【解决方案4】：

尽量用on()点赞，

$('#cool').on('click','.lol',function(){
    alert("New elements are good to go");
    $(this).css("background-color","teal"); // use this in place of .lol again
});

【讨论】：