Easy way to bind dynamic elements without having to recall functions jquery
<p>I currently have a page in which users can drag content around, resize it, etc. </p>

<p>The basic structure looks like the following:</p>

<pre><code>$('.element').on().resizable().draggable();
</code></pre>

<p>When called at the beginning of the document load it adds bind events, resizable and draggable. Now the problem I have is that a user can add in new elements dynamically. These new elements are no longer covered by the above code. What I ended up doing is the following:</p>

<pre><code>function bindEvents(){
    $('.element').on().resizable().draggable();
}
</code></pre>

<p>bindEvents();</p>

<p>And then when elements are added I turn off the current implementation and then turn it on again so that it will include the new elements:</p>

<pre><code>$('.element').off().resizable("destroy").draggable("destroy");
bindEvents();
</code></pre>

<p>No I know this is incredibly inefficient and most likely uses way more memory than needed. My question is, is there a better way to do this? Is there a way to add the one particular element to the already established group of bound elements?</p>

<p>Thanks!</p>
