4

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?

2 Answers 2

7

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
});
5
  • Hi Sergey, and welcome to WPSE! Thanks so much for your answer. Unfortunately, I'm not working on that project anymore, so I can't test your answer. I do appreciate it, though, and hope it will help others who encounter the same problem :)
    – Lea Cohen
    Nov 20, 2014 at 13:25
  • 1
    Hi, Lean, thank you :) I believe, this comment will be useful for me too next time I work with widgets :) Mar 31, 2015 at 15:23
  • Lea, I apologize for misspelling your name, sorry! Mar 31, 2015 at 15:32
  • Finally, a solution to my 2-year-long problem. Thank you!
    – Ahmed Saad
    Jun 25, 2015 at 20:19
  • See core.trac.wordpress.org/changeset/27969 for (slightly) more information... Jul 28, 2017 at 15:26
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.