WordPress自定义小部件图像选择器-禁用”??保存”按钮

我正在尝试创建一个自定义WordPress小部件, 以允许用户选择图像, 链接和标题。该小部件将在侧栏中显示为广告图像。这是代码:
PHP:

< ?phpclass Ad extends WP_Widget {public function __construct() { parent::__construct( 'widget-ad', 'Advertisement', array( 'description' => 'Advertisement Widget', 'classname'=> 'widget-ad', ) ); }public function widget( $args, $instance ) { ... }public function form( $instance ) { $title= ! empty( $instance['title'] ) ? $instance['title'] : ''; $url= ! empty( $instance['url'] ) ? $instance['url'] : ''; $image_url= ! empty( $instance['image_url'] ) ? $instance['image_url'] : ''; ?> < p> < label for="< ?php echo esc_attr( $this-> get_field_id( 'title' ) ); ?> "> Title: < /label> < input class="widefat" id="< ?php echo esc_attr( $this-> get_field_id( 'title' ) ); ?> " name="< ?php echo esc_attr( $this-> get_field_name( 'title' ) ); ?> " type="text" value="http://www.srcmini.com/< ?php echo esc_attr( $title ); ?>"> < /p> < p> < label for="< ?php echo esc_attr( $this-> get_field_id( 'url' ) ); ?> "> URL: < /label> < input class="widefat" id="< ?php echo esc_attr( $this-> get_field_id( 'url' ) ); ?> " name="< ?php echo esc_attr( $this-> get_field_name( 'url' ) ); ?> " type="text" value="http://www.srcmini.com/< ?php echo esc_attr( $url ); ?>" dir="ltr"> < /p> < p> < img class="image-fluid" id="< ?php echo esc_attr( $this-> get_field_id( 'image_url' ) ) . "-img"; ?> " src="http://www.srcmini.com/< ?php echo esc_url( $image_url ); ?>" /> < input type="text" id="< ?php echo esc_attr( $this-> get_field_id( 'image_url' ) ); ?> " name="< ?php echo esc_attr( $this-> get_field_name( 'image_url' ) ); ?> " value="http://www.srcmini.com/< ?php echo esc_url( $image_url ); ?>" /> < br> < a href="http://www.srcmini.com/#" class="button js-select-media" data-target="< ?php echo esc_attr( $this-> get_field_id( 'image_url' ) ); ?> "> Select Image < /a> < a href="http://www.srcmini.com/#" class="button js-remove-media" data-target="< ?php echo esc_attr( $this-> get_field_id( 'image_url' ) ); ?> "> Remove Image < /a> < /p> < ?php }public function update( $new_instance, $old_instance ) { $instance= array(); $instance['title']= ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; $instance['url']= ( ! empty( $new_instance['url'] ) ) ? strip_tags( $new_instance['url'] ) : ''; $instance['image_url']= ( ! empty( $new_instance['image_url'] ) ) ? strip_tags( $new_instance['image_url'] ) : ''; return $instance; } }/** * Register Widget */ add_action( 'widgets_init', function() { register_widget( 'Ad' ); });

JavaScript:
$(document).ready(() => {// Open WP media selector $(document).on('click', '.js-select-media', (e) => { e.preventDefault(); const target_id = $(e.target).data('target'); const input_element = $('#' + target_id); const img_element = $('#' + target_id + '-img'); const image = wp.media({ title: 'Select An Image', multiple: false, library: { type: 'image' }, button: { text: 'Select' }, }).open().on('select', (e) => { const image_url = image.state().get('selection').first().toJSON().url; input_element.val(image_url).trigger('change'); img_element.attr('src', image_url); }); }); // Remove selected Image $(document).on('click', '.js-remove-media', (e) => { e.preventDefault(); const element = $(e.target); const target_id = element.data('target'); $('#' + target_id).val('').trigger('change'); $('#' + target_id + '-img').attr('src', ''); });

问题:
在WordPress网站的管理区域中, 当我选择图像或删除选定的图像时, 小部件的” 保存” 按钮未启用(它未检测到图像输入字段的值更改)。我尝试了一切。我不知道怎么了
#1浏览完WordPress文件(PHP和JS)后, 我遇到了一个似乎负责保存小部件(使用Ajax请求)的函数。
位置:
website-root\wp-admin\js\widgets.js

它在window对象上定义了一个名为wpWidgets的对象, 因此它在全局范围内可用。在529行上, wpWidgets定义了一个带有此签名的函数:
save : function( widget, del, animate, order ) { ... }

widget参数是widget类的div元素。
【WordPress自定义小部件图像选择器-禁用” ??保存” 按钮】因此, 在我的JavaScript中, 我这样调用它来手动保存小部件:
wpWidgets.save( input_element.closest('div.widget'), 0, 1, 0 );

    推荐阅读