I have built a plugin with a widget. This widget has possibly many lines of setting fields, so I devided it in collapsable sections like it is possible with the widgets and sidebars itself. This all works fine until I save the widgets settings, then the script stops working all including the collapse functionality. Till now I was not able to identify, what can cause this behavior. There are no script errors or messages in the browser console window. My script is enqued even after saving. The only thing I discovered is, that after saving the current screen object of wordpress is null, after page reload it is rebuilt and sreen->base is 'widgets' as it should be. I'm wondering what happens after saving the widget, so that my script won't work anymore.

I have built a plugin with a widget. This widget has possibly many lines of setting fields, so I devided it in collapsable sections like it is possible with the widgets and sidebars itself. This all works fine until I save the widgets settings, then the script stops working all including the collapse functionality. Till now I was not able to identify, what can cause this behavior. There are no script errors or messages in the browser console window. My script is enqued even after saving. The only thing I discovered is, that after saving the current screen object of wordpress is null, after page reload it is rebuilt and sreen->base is 'widgets' as it should be. I'm wondering what happens after saving the widget, so that my script won't work anymore.

• javascript
• widgets

• No-one will be able to help you unless you show your code. – vancoder Commented Jun 23, 2020 at 16:23

1 Answer 1

OK, here is my code and some more information.

This is the markup structure without the form fields of my widget:

<div id="widget-XX_my-widget" class="widget open" style="">
  <div class="widget-top">
    <div class="widget-title-action"> </div>
    <div class="widget-title ui-sortable-handle">
      <h3>My Widget-Title<span class="in-widget-title"></span></h3>
    </div>
  </div>
  <div class="widget-inside" style="display: block;">
    <form method="post">
      <div class="widget-content">
        <div class="my-widget-section">
          <div class="my-widget-top"> </div>
          <div class="my-widget-inside active"> </div>
        </div>
        <div class="my-widget-section">
          <div class="my-widget-top"> </div>
          <div class="my-widget-inside"> </div>
        </div>
      </div>
      <div class="widget-control-actions">
        <div class="alignleft"> <button type="button" class="button-link button-link-delete widget-control-remove">Delete</button>
          <span class="widget-control-close-wrapper"> <button type="button"

              class="button-link widget-control-close">Ready</button> </span>
        </div>
        <div class="alignright"> <input name="savewidget" id="widget-XX_my-widget-savewidget" class="button button-primary widget-control-save right" value="Save" disabled="disabled" type="submit"> <span class="spinner"></span> </div>
        <br class="clear">
      </div>
    </form>
  </div>
  <div class="widget-description"> My Widget Description </div>
</div>

This is an example of a script that shows the problem I have. The real code I'm using is not relevant, because the behavior of this example is quite the same. After reloading the page widgets.php all works fine. When I click on 'div.my-widget-top' a JS alert box shows the message: 'mywidget_top' and when I click on the header of my-widget, then the the message: 'widgtop' pops up. When I have clicked on the save button(.widget-control-save) at the bottom of my-widget (after saving) then when I click on 'div.my-widget-top' no alert box is shown, but the click event bind to 'div.widget-top' is still working and the message 'widgtop' pops up as before.

(function( $ ) {
    'use strict';
    $(document).ready(function(){

    var widgtop = $('div.widget-top');
    var mywidget_top = $('div.my-widget-top');
    
    widgtop.on('click', function(){
        alert('widgtop');
    });        
            
    mywidget_top.on('click', (function(){
        alert('mywidget_top');
        }));
    });

 })( jQuery );

I assume that after the click on the save button resp. after the saving process via ajax all the click events on the form elements inside my-widget are controlled by the widgets.js script of wordpress and the click event binding in my script stops working, not knowing why - what I should change? What I can see is, that after the save process and then clicking on a checkbox or entering a text input field, the save button changes from Saved (greyed out) to Save (blue as normal).