Question

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

<!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的按钮创建时，它正在使用类fool创建新的分区标记。这只与css一起使用而不是与javascript一起使用。例如，标识为hool的按钮和使用类傻瓜创建的新分区标记将被分配给另一个名为lol的类。现在，当我单击按钮$('.lol').click(function)工作时按钮正在工作。但是当我按下新创建的标签时，它没有执行该功能。因为在加载页面时添加了按钮，但是动态地使用append方法创建了新的div标签。

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

Answer 1

你应该试试这个：

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

有关信息，请阅读Event delegation

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

问题是＆＃39; .lol＆＃39;当您尝试选择它以便将click事件侦听器附加到它时，元素仍然不存在。您需要在它存在后选择它，可能在您创建它的同一个函数中选择它，或者使用event delegation。要使用事件委派，请将$('.lol').click(function()更改为$('#cool').on('click', '.lol', function()

使用jquery

4 个答案: