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

1 Answer 1

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

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.