Add a resize event handler only once

Question

I have a widget that insert a div element in the DOM; that div needs some js that handles the resize event;

the problem is:

• the widget can be added multiple times on the same page, but I don't wanto to add many identical resize event handlers on the page (one, acting on the specific widget's class will be enough for all the widget instances);

• the page that will embeed the widget can have its own resize event handler, that should not be deleted;

do you have any suggestion about how to implement this?

Answer 1

Honestly, I didn't get most of workflow explained as you didn't provide any html and js but I hope the following works for you:

var resized = 0;                     // works as a flag
$( window ).on('resize', function () { 
     if ( resized++ >= 1 ) return;
     // do something here.. 
     console.log('resized once');    // console.log as an example! 
});

Good luck.