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).