SiteOrigin 페이지 빌더의 선택 값을 기반으로하는 조건부 필드

Question

SiteOrigin에 의한 페이지 빌더를 플러그인에 통합하려고합니다. siteorigin_panels_row_style_fields 필터를 통해 행 스타일 아래에 사용자 정의 필드를 추가했습니다. here입니다. 사용자 정의 필드 중 하나가 선택입니다. 선택 영역이 특정 값일 때 필드를 숨기거나 표시하려고합니다. 나는 the documentation에 따라, siteorigin_panel_enqueue_admin_scripts 조치를 사용하여 페이지 빌더에 자바 스크립트를 큐에 한, 심지어는 몇 가지 테스트 코드로 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); 
     } 
    }); 

    }); 
}); 

나는 이것이 비슷한 것을 달성하려는 사람들에게 도움이되기를 바랍니다.