dynamic creation of html elements using jquery

Question

I need a way to solve this problem. live() is removed in the jQuery 1.9 which I was using. so now I don't know how to do add an element into the document object model tree dynamically.

<!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>

In this code the problem is when I am clicking the button with id create it is creating new division tag with the class fool. which is only working with the css and not with the javascript. for example button with id hool and new division tags created with class fool are getting assigned to another class called lol. Now the button is working when i click button $('.lol').click(function) is working. but when i press the newly created tags it is not executing the function. because the button was added when the page was loaded but the new div tags are created using append method dynamically.

Now please someone tell me how to run the $('.lol').click(function) by clicking the new div tag. I am currently doing one project so please help. All the answers are welcomed. Thanks in advance.

Bind the handler after element creation, look my answer. – VMcreator Aug 13 '15 at 06:19 — VMcreator, Aug 13 '15 at 06:19

michelem · Answer 1 · 2015-08-13T06:17:34.877

5

You should try this:

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

For info please read Event delegation

edited Aug 13 '15 at 06:17

answered Aug 13 '15 at 06:06

michelem

14,430
5
50
66

According to the document you llinked shouldn't it be $('#cool').on('.lol', 'click', function() { //do something }); – Ashraf Purno Aug 13 '15 at 06:11
This should be avoided, Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents. – VMcreator Aug 13 '15 at 06:21

score 2 · Answer 2 · answered Aug 13 '15 at 06:08

2

Try to use on() like,

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

answered Aug 13 '15 at 06:08

Rohan Kumar

40,431
11
76
106

VMcreator · Answer 3 · 2015-08-13T06:24:29.400

Of course the handler wont be binded to the event because the element wasn't there yet when you're trying to bind them, so the solution is bind the handler after the element is created, like this:

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

What I did is bind the bind event directly to the created element when #create was clicked.

remove this line:

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

Because you already bind the handler after new element was created.

score 1 · Answer 4 · edited May 23 '17 at 12:21

1

The problem is that the '.lol' element doesn't exist yet when you are trying to select it in order to attach a click event listener to it. You need to either select it after it exists, perhaps in the same function where you create it or use event delegation. To use event delegation, change $('.lol').click(function() to $('#cool').on('click', '.lol', function()

edited May 23 '17 at 12:21

Community

1
1

answered Aug 13 '15 at 06:14

Kevin Wheeler

1,331
2
15
24

Yeah same answer as mine – VMcreator Aug 13 '15 at 06:17

dynamic creation of html elements using jquery

4 Answers4