Calling a function on an element inserted into the DOM
<p>I have no control over when and how this element is added to the DOM. But when it does get added I would like to call a call a jQuery function on it. I am looking to match <code>form[data-validate]</code> elements then call a jQuery function I wrote: <code>validate</code></p>

<p>A temporary solution I have come up with:</p>

<pre><code>document.addEventListener('DOMNodeInserted', function(event) {
  if (event.target.nodeName === 'FORM' &amp;&amp; $(event.target).data('validate')) {
    return $(event.target).validate();
  }
}, false);
</code></pre>

<p>According to <a href="https://developer.mozilla.org/en-US/docs/DOM/Mutation_events" rel="nofollow">https://developer.mozilla.org/en-US/docs/DOM/Mutation_events</a> this code will "profoundly degrades the performance of further DOM modifications to that document (making them 1.5 - 7 times slower!)" and the browser compatibility is rather poor.</p>

<p>Can anybody do better?</p>
