保存小部件设置后脚本不再起作用

时间:2020-06-23 作者:Tom

我用一个小部件构建了一个插件。这个小部件可能有许多行设置字段,所以我将其分为可折叠部分,就像小部件和边栏本身一样。这一切都很好,直到我保存小部件设置,然后脚本停止工作,包括折叠功能。到目前为止,我还无法确定是什么导致了这种行为。浏览器控制台窗口中没有脚本错误或消息。保存后,我的脚本仍被保留。我发现的唯一一件事是,在保存wordpress的当前屏幕对象后,该对象为null,在重新加载页面后,它将被重建并重新生成->;基础是“小部件”,正如它应该的那样。我想知道保存小部件后会发生什么,这样我的脚本就不能工作了。

1 个回复
SO网友:Tom

好的,这是我的代码和更多信息。

这是没有我的小部件的表单字段的标记结构:

<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>
这是一个脚本示例,显示了我遇到的问题。我使用的实际代码与此无关,因为此示例的行为完全相同。重新加载页面小部件后。php一切正常。当我单击“div.my-widget-top”时,JS警报框会显示消息:“mywidget\\u top”,当我单击我的小部件的标题时,会弹出消息:“widgetop”。当我单击小部件底部的保存按钮(保存后)时(小部件控制保存),然后当我单击“div.my-widget-top”时,不会显示任何警报框,但与“div.widget-top”绑定的单击事件仍在工作,并且会像以前一样弹出消息“widgetop”。

(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 );
我假设在点击保存按钮后,resp。在通过ajax保存过程之后,我的小部件中表单元素上的所有单击事件都由小部件控制。wordpress的js脚本和我脚本中的click事件绑定停止工作,不知道为什么-我应该更改什么?我所看到的是,在保存过程之后,单击复选框或输入文本输入字段,保存按钮将从保存(灰显)更改为保存(正常情况下为蓝色)。