How do I rebind event after widget save

Question

I am writing a widget who's form elements have a click event attached to. I bind it using jQuery.

However, after clicking save, the bindings gets lost. That is, clicking those elements doesn't trigger the function anymore.

I tried using the on() jQuery method, as suggested here, but that doesn't help:

    var buttonsHolder=jQuery('#widgets-right .icon_buttons');            
    // save the array of big icons, for later reference, and assign them the click event
    var  buttons=buttonsHolder.children('input');
    buttons.on("click",function(){
        openPanel(jQuery(this),jQuery(this).index());
    });

I could put my js code inside the widget form, as suggested here. That does solve the problem, but I really prefer to keep my js code separated.

What do I need to do in order to keep the click event of those elements working even after the save button is clicked?

Answer 1

Wordpress provides callbacks for widgets interactions. You're seems interested in two of them:

widget-added, widget-updated

Usage example:

jQuery(document).on('widget-updated', function(e, widget){
    // do your awesome stuff here
    // "widget" represents jQuery object of the affected widget's DOM element
});

Answer 2

Because the input box is getting rebuilt (or the entire form), I followed advice given me elsewhere, and instead of binding on() to an input box, I bind it higher up and use event delegation:

jQuery('#widgets-right').on('click','.icon_buttons input',function(){
     openPanel(jQuery(this),jQuery(this).index());
});

I still put some js variable declarations inside the widget form, but that's only for convenience, and it's only a few lines of code, so I don't mind it too much.