click event does not work on the text which is created by javascript

Question

In the code that you see under the text, there is a <div> and in it I wrote "Hello World" . I coded based on jQuery that when I click <div> that class name is test it creates a new <div class="test">.. .

The problem is that when I click on the new element which is generated with class name test with text "Book", it does not create new element, where as if I click on "Hello World", it generates new element again.

If anyone helps me to solve this problem, I will be thankful.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(".test").click(function(){
            $(this).after('<div class="test">Book</div>');
        });
    });
</script>
</head>
<body>
    <div class="test">
        Hello World
    </div>
</body>
</html>

$(document).ready(function(){
  $(".test").click(function(){
    $(this).after('<div class="test">Book</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<div class="test">
  Hello World
</div>

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Hikarunomemory, Apr 14 '18 at 08:12
The newly created element `Book` has no event attached to it. Your script to bind click event on `.test` elements only work once when document is ready. In order to solve this problem, try binding the event after the element is created. — Yongfeng, Apr 14 '18 at 08:19

Mamun · Answer 1 · 2018-04-14T09:15:03.847

The problem is that click() only works for elements that already existed when the page loaded. Try the following using on():

$(document).ready(function(){
  $('body').on('click', '.test', function () {
     $(this).after('<div class="test">Book</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>
<div class="test">
    Hello World
</div>

The on event attaches an event handler function for one or more events to the selected elements wherever the elements are on the body.

score 0 · Answer 2 · answered Apr 14 '18 at 08:26

Use delegates for handling the events fired by elements that are created at runtime see the following code:

    $(document).ready(function(){
        $("body").delegate(".test", "click", function(){
            $(this).after('<div class="test">Book</div>');
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    

<div class="test">
Hello World
</div>

score 0 · Answer 3 · answered Apr 14 '18 at 08:30

The event handler is only bound to elements that are already present. In order for it to work on new elements, you need to unbind the event handler on all elements and re-bind it again, or add the event binding to the new element. The second option is shown below.

    $(document).ready(function(){
        var clickHandler = function(){
            var newElem = $('<div class="test">Book</div>');
            newElem.on("click", clickHandler);
            newElem.insertAfter(this);
        };
        $(".test").on("click", clickHandler);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    

<div class="test">
Hello World
</div>

click event does not work on the text which is created by javascript

3 Answers3