jquery onclick new element not created properly

Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI Button - Icons</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #s
        {
            width:200px;
        }
        #div1
        {
            min-width:100px;
            width:auto;
            float:left;
            border:2px solid black;
            min-height:100px;
            height:auto;
            background-color:red;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("div").click(function(){
                $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
            });
            $("#s").click(function(){
                alert("sljsdf");
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        VOLVO B9R
    </div>
</body>
</html>

Here when i click on the first div, the program creates another div. the newly created div is not responding to on click event. in the current code i have specified that the newly created div should give an alert on click but its not working. Thanks!

It won't bind the `onclick` event on newly created `div` – Mr. Alien Jan 09 '14 at 07:28 — Mr. Alien, Jan 09 '14 at 07:28
barmar sorry. i dont know. i didnt check this link – user2870746 Jan 09 '14 at 08:13 — user2870746, Jan 09 '14 at 08:13

Sridhar R · Answer 1 · 2014-01-09T07:32:14.323

2

Since the #s element are created dynamically you need to use event delegation to register event handlers to these elements.

When you use $('#s').click(....); to register an event handler it will register the handle to only those elements which are already present in the dom at the time of the code execution, in you case since these elements are created after that the handlers will not get attached to the newly created elements

Try this

$(document).ready(function(){
 $(document).on('click',"div",function(){
  $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
 });
 $(document).on("click", "#s", function(){
   alert("sljsdf");
 });
});

DEMO

edited Jan 09 '14 at 07:32

answered Jan 09 '14 at 07:27

Sridhar R

19,414
6
36
35

thanks for the help. the demo and the theory. i am learning jquery on my own. so it is a bit diff for me.. thanx – user2870746 Jan 09 '14 at 08:55
@user2870746 if it helps upvote it and accept as answer – Sridhar R Jan 09 '14 at 08:59

score 2 · Answer 2 · answered Jan 09 '14 at 07:29

You need event degation for dynamically added elements. The time the binding code for element with id s is executed the element does not exists in DOM

$(document).on("click", "#s", function(){
   alert("sljsdf");
});

Delegated events

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery doc.

this is what i needed. thanx!!:) – user2870746 Jan 09 '14 at 08:54 — user2870746, Jan 09 '14 at 08:54

score 2 · Answer 3 · answered Jan 09 '14 at 07:30

2

When your dom ready handler is executed the #s div does not exists in the dom, so the click handler will not get added to the element. You can use event delegation to fix this problem

$(document).on('click', "#s", function () {
    alert("sljsdf");
});

Demo: Fiddle

answered Jan 09 '14 at 07:30

Arun P Johny

365,836
60
503
504

thank you for the demo as well. :) – user2870746 Jan 09 '14 at 08:54

score 2 · Answer 4 · answered Jan 09 '14 at 07:31

2

try something like this

$("body").on('click','#s',function(){
   alert("sljsdf");
});

REFERENCE

http://api.jquery.com/on/

answered Jan 09 '14 at 07:31

rajesh kakawat

10,330
1
18
38

thanx for the advice!! – user2870746 Jan 09 '14 at 08:53

score 1 · Answer 5 · answered Jan 09 '14 at 07:36

Please see this LINK

OR

Try below code...

Your HTML ....

<div id="div1"> VOLVO B9R </div>

Your JQuery Code....

$(document).ready(function () {    
    $("div").click(function () {    

        $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));    

        $("#s").bind('click', function () {
            alert("sljsdf");
        });
    });
});

Your CSS....

#s
{
width:200px;
float:right;
}
#div1
{
min-width:100px;
width:auto;
float:left;
border:2px solid black;
min-height:100px;
height:auto;
background-color:red;
}

score 1 · Answer 6 · edited Jun 11 '16 at 08:28

1

The following jQuery lines of code will help you..

$(document).ready(function(){
    $('body').on('click','#div1',function(){
      $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
      $('#s').click(function(){
       alert('a');
      })
    })
});

edited Jun 11 '16 at 08:28

marc_s

675,133
158
1,253
1,388

answered Jan 09 '14 at 07:39

Green Wizard

3,001
4
14
28

score 1 · Answer 7 · answered Jan 09 '14 at 07:40

1

Use below code..

 $(document).ready(function () {
        $("div").click(function () {
            $(this).after($('<div id="s" style="background-color:blue; clear:both">NLC TRANSPORT</div>'));
            $("#s").bind("click", function () {
                alert("sljsdf");
            });
        });

    });

Good luck.

answered Jan 09 '14 at 07:40

Pradeep Pansari

1,287
6
10

thanx!!!:) this is working perfectly! – user2870746 Jan 09 '14 at 08:52

score 0 · Answer 8 · answered Jan 09 '14 at 07:32

You can't add an event handler to an element that doesn't exist yet:

 $(document).ready(function () {
     $("div").click(function () {
         $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
         $("#s").click(function () {
             alert("sljsdf");
         });
     });
 });

score 0 · Answer 9 · answered Jan 09 '14 at 07:34

0

Try This Code :

$(document).ready(function(){
 $("#div1").click(function(e){
    $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
     $("#s").click(function(){
         alert("sljsdf");
         });

    });

});

answered Jan 09 '14 at 07:34

Priya jain

725
2
5
15

jquery onclick new element not created properly

9 Answers9