Home/ Questions/Q 8014403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T19:55:22+00:00

I want to add an event handle to an element that will be created

  • 0

I want to add an event handle to an element that will be created later in DOM.

Basically, what I am trying to do is that, when I click p#one, new element p#two will be created, then I click p#two, tell me “p#two” clicked. However, it doesn’t work, I didn’t get the console.log result of ‘p#two clicked’ after I click p#two.

I use on() to add click event to p#two. What do I do wrong?

Thanks.

Below is my example code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>on() test</title>
  <link type="text/css" href="http://localhost/jquery-ui-1.8.20.custom/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {

        $('p#two').on('click', function() {
            console.log('p#two clicked');
        });


        $('p#one').click(function() {
            console.log('p#one clicked');
            $('<p id="two">two</p>').insertAfter('p#one');
        });

    }); // end doc ready
  </script>
</head>

<body>
    <p id="one">one</p>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $('body').on('click','p#two', function() {
    console.log('p#two clicked');
});

    you can also use

    $(document).on('click', 'p#two', function() {

});

    Read more about .on()

    you can also use .delegate()

    $('body').delegate('#two', 'click', function() {

});
    • 0