Question

I currently have a page in which users can drag content around, resize it, etc.

The basic structure looks like the following:

$('.element').on().resizable().draggable();

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:

function bindEvents(){
    $('.element').on().resizable().draggable();
}

bindEvents();

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:

$('.element').off().resizable("destroy").draggable("destroy");
bindEvents();

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?

Thanks!

Answer 1

If you don’t want to waste work on the old items then brand them with something and avoid them later, or vice versa.

function bindEvents(){
    $('.element').not('.initialized').addClass('initialized')
        .on().resizable().draggable();
}