使用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