Image Uploader не открывает модальный виджет

Я застрял в начале моего пользовательского виджета 🙂 Когда я нажимаю кнопку, которая должна открывать модальный файл с загрузчиком WP media, он не открывает его. Я установил JS для виджета в функциях и пользовательской загрузке JS и не обнаружил ошибок. Я также попытался добавить эти кнопки к простому обмену, и он работает, но не приводит к появлению виджета.

Виджет PHP

class Deo_Profile_Widget extends WP_Widget { // setup the widget name, description etc. function __construct() { $widget_ops = array( 'classname' => "deo_profile_widget", 'desciption' => 'Custom Profile Widget', ); parent::__construct( 'deo_profile', 'Deo Profile', $widget_ops); } // update of the widget function update( $new_instance, $old_instance ) { $instance = $old_instance; return $instance; } // back-end display of widget function form( $instance ) { ?> <input type="hidden" id="image-hidden-field" name="custom_image_data"> <input type="button" id="image-upload-button" class="button button-primary" value="Add Image"> <input type="button" id="image-delete-button" class="button" value="Remove Image"> <?php } // front-end display of widget function widget( $args, $instance ) { echo "Hey"; } } add_action( 'widgets_init', function() { register_widget( 'Deo_Profile_Widget' ); }); 

Виджет JS

 (function($){ /* WordPress Media Uploader -------------------------------------------------------*/ var addButton = $('#image-upload-button'); var deleteButton = $('#image-delete-button'); var hiddenField = $('#image-hidden-field'); var mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Select an Image', button: { text: 'Use This Image' }, multiple: false }); addButton.on('click', function(e) { e.preventDefault(); if ( mediaUploader ) { mediaUploader.open(); return; } }); })(jQuery); 

Solutions Collecting From Web of "Image Uploader не открывает модальный виджет"

После многих часов тестирования и изучения я наконец нашел причину проблемы. Если я добавлю класс к кнопке, он работает. Но не любой класс, только класс deo-btn .

Итак, это сработает:

 <input type="button" id="image-upload-button" class="deo-btn button button-primary" value="Add Image"> 

И это не так:

 <input type="button" id="image-upload-button" class="button button-primary" value="Add Image"> 

Кроме того, это не сработает:

 <input type="button" id="image-upload-button" class="just-button button button-primary" value="Add Image"> 

Что действительно странно, что я все еще выбираю кнопку в JS, используя кнопку ID -upload-button