CODEWITHSUNDEEP
javascriptjqueryhtmlcssscripting
karthi keyan
karthi keyan

Reputation: 65

dynamic creation of html elements using jquery

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.

Upvotes: 0

Views: 727

Answers (4)

VMcreator
VMcreator

Reputation: 843

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.

Upvotes: 2

michelem
michelem

Reputation: 14590

You should try this:

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

For info please read Event delegation

Upvotes: 5

Kevin Wheeler
Kevin Wheeler

Reputation: 1462

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()

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

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
});

Upvotes: 2

Related Questions