title: Attach javascript/jquery event on dynamically created elements
body: <p>I've seen a lot of different questions similar to this, but all of them generally targeted a specific selector. Please let me know if there is a duplicate somewhere and I've missed it.</p>
  
  <p>Take this scenario: </p>
  
  <p>You want to build a jquery plugin for a wordpress, drupal, or basically any site that uses third party functionality. Since you don't know ahead of time every specific event and selector you will need to target how would you add jquery/javascript functionality to elements that are created dynamically. Plus you don't know how the element is created (callback using ajax/php/etc).</p>
  
  <p>Example:</p>
  
  <p>I recently tried adding select2 or selectize to my entire site. Unfortunately, since I can't determine ahead of time when select elements (from other plugins/modules) will be added, I can't ensure that the select jquery will work on newly created selects. </p>
  
  <p><strong>Select2</strong></p>
  
  <p>This is the normal way but doesn't work on dynamically created or cloned selects:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
      jQuery(document).ready(function($) {
          $("select").select2();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>If I knew all the events that added these selects I could simply do the following:</p>
  
  <pre><code> $( ".some_button_that_creates_new_selects" ).on( "click", function() {
          jQuery("select").select2(); 
      });
   });
  </code></pre>
  
  <p>However, since I don't know all the selectors of dynamic selects ahead of time (since many are added by 3rd party plugins), select2 will not work on new selects. So the above would only work on a per case senerio.</p>
  
  <p>I need to find a way to traverse through the dom tree and recognize when new selects are created. </p>
  
  <p>I tried targeting several events with .on but it didn't work well at all.</p>
  
  <p>I read that the javascript <code>document.getElementsByTagName</code> recognizes changes in the dom and are reflected in the collection. I also looked into <code>querySelectorAll</code>, but not sure exactly how it works.</p>
  
  <p>I also tried messing with the <code>MutationObserver</code> and checking if the <code>.addednodes.length</code> of select tags changed, but I didn't really get anywhere.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After doing some testing I realized that the problem might lie within the select2 plugin itself. Select2 loads dynamic selects but doesnt get the positioning. Chrome eventually throws typeerros : cannot read property 'find' of null, cannot read property 'hasclass' of null.</p>
  
  <p><img src="https://i.stack.imgur.com/Ug7wD.png" alt="Example adding the select2 plugin to wordpress. Clicking quick edit adds new fields "></p>
  
  <p><img src="https://i.stack.imgur.com/b85Ev.png" alt="New selects don&#39;t load properly. and there is no dropdown when clicking on them."></p>
  
  <p><img src="https://i.stack.imgur.com/fWgjh.png" alt="Clicking once on the select and then below it will load the select2 overlay wrong"></p>