Top community members
All Wiki Articles Create Wiki Article

In the past we had a dream,
to have place where we could share IT knowledge,
to ask questions without fear that someone will judge us.

Now we are a group of people who make this dream come true. ❤ 💻

If you think sharing knowledge and helping other is valuable.

join our community - Click here

JavaScript - How to bind event on dynamically created elements?

0 contributions
7 points

In JavaScript it is possible to bind event on dynamically created element in following way.

1. Event listener in pure JavaScript (VanillaJS).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <script>
  
    var element = document.createElement('button');

    element.addEventListener('click', function(event) {
      this.innerText = 'Button clicked!';
    });

    element.innerText = 'Click me!';

    document.body.appendChild(element);

  </script>
</body>
</html>

Note: as first argument for addEventListener method we can type any event from this list depending on what type of object we work.

Result:

Event bound on dynamically created element - before click operation.
Event bound on dynamically created element - before click operation.

 

Event bound on dynamically created element - after click operation.
Event bound on dynamically created element - after click operation.

2. element.on[eventname] property in pure JavaScript (VanillaJS). 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <script>
  
    var element = document.createElement('button');

    element.onclick = function(event) {
      this.innerText = 'Button clicked!';
    };

    element.innerText = 'Click me!';

    document.body.appendChild(element);

  </script>
</body>
</html>

Note: in above code we can use as event property different combination of on + event name from this list depending on what type of object we work e.g. onmoveseover, onmouseout, ondblclick, etc.

Result:

Event bound on dynamically created element - before click operation.
Event bound on dynamically created element - before click operation.

 

Event bound on dynamically created element - after click operation.
Event bound on dynamically created element - after click operation.

3. jQuery on method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <script>
  
    var element = document.createElement('button');

    $(element).on('click', function(event) {
      this.innerText = 'Button clicked!';
    });

    element.innerText = 'Click me!';

    document.body.appendChild(element);

  </script>
</body>
</html>

Note: as first argument for jQuery.prototype.on method we can type any event from this list depending on what type of object we work.

Result:

Event bound on dynamically created element - before click operation.
Event bound on dynamically created element - before click operation.

 

Event bound on dynamically created element - after click operation.
Event bound on dynamically created element - after click operation.

Merged question

  1. JavaScript - How to add event on dynamically created element? 
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more