Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

3 Answers 3

up vote 0 down vote accepted

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.

share|improve this answer

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
});
share|improve this answer
    
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 '14 at 13:25
    
Hi, Lean, thank you :) I believe, this comment will be useful for me too next time I work with widgets :) –  Sergey Arefiev Mar 31 at 15:23
    
Lea, I apologize for misspelling your name, sorry! –  Sergey Arefiev Mar 31 at 15:32

I added your code and it fixed for widget-updated i.e. as I update widget, all options work fine. But now as I add any new widget, it doesn't work well until I've refresh the page or hit save once.

I'm trying to fix below code in my project:

$( document ).on( 'widget-updated' , function( event, $widget ){
    $('.of-color').wpColorPicker();
    $('.selectpicker').selectpicker();
});

I also tried like this

$( document ).on( 'widget-updated widget-added' , function( event, $widget ){
    $('.of-color').wpColorPicker();
    $('.selectpicker').selectpicker();
});

But still didn't work for new added widget. Please help to fix this issue.

Thanks.

share|improve this answer
2  
This doesn't provide an answer to the question. You should ask your own question, and reference this question if needed. See How to Ask. –  Gabriel May 8 at 0:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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