SiteOrigin页面生成器中基于选择值的条件字段

Question

我正在尝试集成页面生成器的SiteOrigin到我的插件。我已经通过siteorigin_panels_row_style_fieldsfilter found here在行样式下添加了一些自定义字段。其中一个自定义字段是select。我希望字段要么被隐藏，要么被显示，当选择是在某个值。我已经按照the documentation使用siteorigin_panel_enqueue_admin_scripts操作将Javascript加入到页面生成器中，甚至还添加了带有一些测试代码的panelsopen事件：

jQuery( document ).ready(function($) {
  $(document).on('panelsopen', function(e) {
    $('select[name="style[test_field]"]').bind('change', function (e) {
      if( $(this).val() == 'option1' ) {
        $('input[name="style[second_field]').hide(500);
        $('input[name="style[third_field]').show(500);
      } else {
        $('input[name="style[second_field]').show(500);
        $('input[name="style[third_field]').hide(500);
      }
    });
  });
});

然而，这似乎不起作用。任何我可以解决这个问题的帮助或想法都将不胜感激！

Answer 1

经过研究，我通过使用jQuery中的ajaxComplete()函数解决了这一问题。它是这样工作的：

$(function() {
  $(document).ajaxComplete(function() {

    $('select[name="style[test_field]"]').bind('change', function (e) {
      if( $(this).val() == 'option1' ) {
        $('input[name="style[second_field]').hide(500);
        $('input[name="style[third_field]').show(500);
      } else {
        $('input[name="style[second_field]').show(500);
        $('input[name="style[third_field]').hide(500);
      }
    });

  });
});

我希望这对任何想要实现类似目标的人有所帮助。