How to handle components that can be added dynamically on page?

How to handle components that are added on document load and also that can be inserted after the initial page load?

Problem

A dialog (or modal) for example, when the page loads some javascript will define the behavior, functionalities, event handlers, etc. to elements that uses the css class of component ("myDialog" in this case). Each element is an instance and the component can have multiple instances.

<div class="myDialog"></div>
<div class="myDialog"></div>
<div class="myDialog"></div>
<div class="myDialog"></div>

But what if I need to add a new dialog after the initial page load? Will I have to upgrade all instances? and if upgrade twice the same element (instance)? How to prevent the instances to be upgraded more than once so that, for example, do not doubles the event handlers?

Believe that I don't need to use a large library/framework as React, AngularJS, Polymer among others, to only handle this task.

Is there any library that propose a design pattern for handle registration and dinamically upgrades of components at the DOM?