Using append() and html() to Add Event Listeners to Dynamically Added Elements [jQuery]

$().click( ～ etc. can be used to add tag elements dynamically, but sometimes the click event does not work for the added elements.
This article introduces a method to set click events for elements added using jQuery’s append() and html().

Web development often requires adding elements dynamically to a page—for example, displaying a new element when a button is clicked.
However, one common issue is “setting event listeners for dynamically added elements.”
Typically, events are assigned to existing elements using `$().click()`, but this approach does not work well for dynamically added elements.
This article explains how to use `.html()` and `.append()` in jQuery to add new elements and assign `click` events to them.

CSS Styling for Dynamically Added Elements

Here, we define CSS styles for the dynamically added elements.
Applying these styles helps visually indicate which elements are clickable and enhances the UI.
Feel free to adjust the following CSS as needed.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tagutuika{
  padding: 4px;
  width: 380px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #cccccc;
}
.addhtml{
  padding: 4px;
  width: 450px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #4DA6FF;
}
.addapnd{
  padding: 4px;
  width: 450px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #FFB973;
}
</style>

HTML Structure for Click Button and Target Area

Next, we define the HTML structure.
In this example, clicking on an element with `class=”tagutuika”` will add elements to an area with `class=”addarea”`.
This structure specifies where the dynamically added elements will appear.

<h1>Click the gray area below to add elements using .html() and .append().</h1>

<div class="tagutuika">Click this area to add elements below.</div>

<div class="addarea"></div>

In this HTML code, clicking the `.tagutuika` area will add new elements inside the `.addarea` container.
Be sure to specify the correct target area for dynamically added elements.

Using JavaScript to Add Event Listeners to Dynamic Elements

Finally, we use JavaScript to set event listeners for dynamically added elements.
We include the `jquery-2.2.0.min.js` file.

Normally, events are assigned using `$().click()`, but this does not work for dynamically added elements.
Instead, we use the `.on()` method, which allows us to delegate events to parent elements so that newly added child elements can also respond.

Refer to the following JavaScript code:

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("body").on('click', '.tagutuika', function(){
  $(".addarea").html('<div class="addhtml">This tag was added using jQuery .html().<br>Click this area to see an alert message.</div>');
  $(".addarea").append('<div class="addapnd">This tag was added using jQuery .append().<br>Click this area to see an alert message.</div>');
});

$("body").on('click', '.addhtml', function(){
  alert("class=addhtml tag was clicked!");
});
$("body").on('click', '.addapnd', function(){
  alert("class=addapnd tag was clicked!");
});
</script>

This code performs the following actions:

• When `.tagutuika` is clicked – New elements are added to `.addarea` using `.html()` and `.append()`.
• When an `.addhtml` element is clicked – An alert message is displayed.
• When an `.addapnd` element is clicked – Another alert message is displayed.

By using this approach, event listeners are correctly assigned to dynamically added elements, ensuring proper functionality.

Demo Page: Adding Event Listeners to Dynamically Added Elements with jQuery

To see this in action, check out the demo page.
Click the link below to access a demo showcasing how `.html()` and `.append()` work with event delegation.

Demo: Adding Event Listeners to Dynamically Added Elements with jQuery

Conclusion

In this article, we introduced how to set event listeners for dynamically added elements using jQuery’s `.on()` method.
This approach is extremely useful for creating interactive web pages where elements are added dynamically.

By leveraging jQuery, you can create dynamic and responsive UI components that enhance user interaction.
The `.on()` method is a key technique in event delegation, allowing developers to handle dynamically generated elements efficiently.

Use this technique to build more interactive and user-friendly websites!

　
※ If you reuse this code, do so at your own risk.
Please do not copy the Google Analytics tag included in the demo page’s `` section.