使用jquery动态创建html元素

Question

我需要一种解决此问题的方法。 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) 。 我目前正在做一个项目，请帮忙。 欢迎所有答案。 提前致谢。

Answer 1

您应该尝试这样：

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

有关信息，请阅读事件委托

Answer 2

尝试像使用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
});

Answer 3

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

   $('#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时将bind事件直接绑定到创建的元素。

删除此行：

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

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

Answer 4

问题在于，当您尝试选择.lol元素以将click事件监听器附加到该元素时，该元素尚不存在。 您需要在它存在之后选择它，或者在创建它的同一函数中选择它，或者使用事件委托。 若要使用事件委托， $('#cool').on('click', '.lol', function() $('.lol').click(function()更改$('#cool').on('click', '.lol', function()

使用jquery动态创建html元素

问题描述

4 个解决方案

解决方案1
5 2015-08-13 06:06:47

解决方案2
2 2015-08-13 06:08:44

解决方案3
2 2015-08-13 06:11:23

解决方案4
1 2015-08-13 06:14:45

使用jquery动态创建html元素

问题描述

4 个解决方案

解决方案1 5 2015-08-13 06:06:47

解决方案2 2 2015-08-13 06:08:44

解决方案3 2 2015-08-13 06:11:23

解决方案4 1 2015-08-13 06:14:45

解决方案1
5 2015-08-13 06:06:47

解决方案2
2 2015-08-13 06:08:44

解决方案3
2 2015-08-13 06:11:23

解决方案4
1 2015-08-13 06:14:45