title: How to bind click event on iframes that don't exist yet?
body: <p>I want to bind an event on some iframes that are dynamically created on a page. </p>
  
  <p>There is a way to bind events on regular elements that don't exist yet on page, using jQuery's .on() method, and passing a selector as second parameter. Like this :</p>
  
  <pre><code>$(document).on('click', 'div', () =&gt; { 
    // some code 
  });
  </code></pre>
  
  <p>But iframe behaves differently I guess. This won't work:</p>
  
  <pre><code>$(document).on('click', 'iframe', () =&gt; { 
    // some code 
  });
  </code></pre>
  
  <p>Also I thought of these: </p>
  
  <pre><code>$(window).on('click', 'document', () =&gt; {});
  // or
  $(document).on('click', 'body', () =&gt; {});
  </code></pre>
  
  <p>None of them worked.</p>
  
  <p>Also I thought of another approach: </p>
  
  <pre><code>$(document).on('load', 'iframe', e =&gt; {
    $(e.target).contents().find('body').on('click', () =&gt; {
      // some code
    });
  });
  </code></pre>
  
  <p>Didn't even bind the load event for iframes.</p>
  
  <p>I MIGHT be able to handle it with completely different approach. I can bind the click event else where in code, each time an iframe is created, and they are infact "existed" in the page, then I might be able to bind any event I want to them. But I want to do that as the last solution. 
  If there is a way to bind these events on page load for any iframes that will be created dynamically in the page, please suggest a solution.</p>
  
  <p>UPDATE: I am on the same-domain, so the cross-origin restrictions don't apply.</p>