Der Widget Medien-Uploader wird nach dem Speichern des Widgets nicht geöffnet

Ich versuche, über mich Widget mit WordPress Media Uploader zu machen. Wenn ich auf den Button Hochladen klicke, öffnet sich der MediaUploader, aber nachdem ich auf ” Speichern” geklickt habe, funktioniert der Button nicht mehr. Das selbe Verhalten, wenn ich ein aktives Widget habe und dann einen weiteren hinzufüge, funktioniert der Media Upload Button nicht . Keine JS-Fehler in der Konsole. Kann mir jemand zeigen, wo ich falsch liege?

PHP

class Inka_Profile_Widget extends WP_Widget { // setup the widget name, description etc. function __construct() { $widget_options = array( 'classname' => esc_attr( "inka_profile_widget", 'inka' ), 'description' => esc_html__( 'Custom Profile Widget', 'inka' ), 'customize_selective_refresh' => true ); parent::__construct( 'inka_profile', 'Inka Profile', $widget_options); } // back-end display of widget function form( $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'About Me', 'inka' ); $image = ! empty( $instance['image'] ) ? $instance['image'] : ''; ?> 

<label for="get_field_id('title') ); ?>"> <input class="widefat" id="get_field_id( 'title' ) ); ?>" name="get_field_name( 'title' ) ); ?>" type="text" value="">

<img src="https://wordpress.stackexchange.com/questions/273394/widget-media-uploader-doesnt-opens-after-widget-save/" alt="" class="deo-image-holder" style="width: 100%;">

<input type="hidden" class="deo-image-hidden-field" name="get_field_name( 'image' ); ?>" id="get_field_id( 'image' ); ?>" value="https://wordpress.stackexchange.com/questions/273394/widget-media-uploader-doesnt-opens-after-widget-save/"/>

<?php } // front-end display of widget function widget( $args, $instance ) { echo "Hey"; } // update of the widget function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; $instance['image'] = ( ! empty( $new_instance['image'] ) ) ? strip_tags( $new_instance['image'] ) : ''; return $instance; } } add_action( 'widgets_init', function() { register_widget( 'Inka_Profile_Widget' ); });

JS

 (function($){ /* WordPress Media Uploader -------------------------------------------------------*/ var addButton = $('.deo-image-upload-button'); var deleteButton = $('.deo-image-delete-button'); var hiddenField = $('.deo-image-hidden-field'); var imageHolder = $('.deo-image-holder'); var mediaUploader; addButton.on('click', function(e) { e.preventDefault(); if ( mediaUploader ) { mediaUploader.open(); return; } mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Select an Image', button: { text: 'Use This Image' }, multiple: false }); mediaUploader.on('select', function() { var attachment = mediaUploader.state().get('selection').first().toJSON(); hiddenField.val(attachment.url); imageHolder.attr('src', attachment.url); }); mediaUploader.open(); }); })(jQuery); 

Solutions Collecting From Web of "Der Widget Medien-Uploader wird nach dem Speichern des Widgets nicht geöffnet"

Ok, ich habe endlich gefunden, was das Problem verursacht und möchte meine Lösung hier teilen, falls jemand dieselbe Erfahrung hat. Es ist jedoch sehr traurig, dass diese Information nirgends hervorgehoben wird (Codex, wp Blogs, Stackexchange usw.).

Das erste Problem ist, wie click-Ereignis an die Schaltfläche gebunden wird. Wenn Sie es direkt an die Schaltflächenauswahl binden, wird WordPress nach dem Speichern des Widgets diese aktualisieren und das Klickereignis von dieser Schaltfläche lösen. Die Lösung besteht also darin, auf den Körper zu klicken und ihn dann an die Schaltflächenauswahl zu delegieren:

 $('body').on('click', '.deo-image-upload-button', function(e) { e.preventDefault(); ... } 

Das zweite Problem war, dass nach dem Speichern des Widgets die versteckte Eingabe nicht mehr mit der URL des ausgewählten Bildes gefüllt wird. Das geschah, weil ich die Eingabe- und Bildelemente in die Variablen außerhalb des MediaUploader- Select- Ereignisses zwischengespeichert habe. Diese Elemente einfach zu platzieren, triggers dieses Problem:

 mediaUploader.on('select', function() { var attachment = mediaUploader.state().get('selection').first().toJSON(); $('.deo-hidden-input').val(attachment.url); $('.deo-media-image').attr('src', attachment.url); }); 

Nach der Säuberung und Optimierung sieht mein Code jetzt so aus:

 /* WordPress Media Uploader -------------------------------------------------------*/ var mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Select an Image', button: { text: 'Use This Image' }, multiple: false }); $('body').on('click', '.deo-image-upload-button', function(e) { e.preventDefault(); if ( mediaUploader ) { mediaUploader.open(); } mediaUploader.on('select', function() { var attachment = mediaUploader.state().get('selection').first().toJSON(); $('.deo-hidden-input').val(attachment.url); $('.deo-media-image').attr('src', attachment.url); }); mediaUploader.open(); }); 

Hoffe, dass diese Information für Sie hilfreich sein wird;)