Warum erscheint die nicht gerenderte Widget-Nummer “__i__” im JavaScript, aber nicht im HTML?

Ich habe ein Widget, an dem ich gearbeitet habe und das ein -Tag innerhalb der $widget->form() -Methode enthält. Ich verwende Folgendes in meinem Quellcode innerhalb des Script-Tags:

  (function ($) { var desrdPostTypeSelector = '#get_field_id( 'desired_post_type' ); ?>'; var beginPostTypeSelector = '#get_field_id( 'beginning_post_type' ); ?>'; $('#get_field_id( 'isSingle' ); ?>').on( 'change', function() { $( '., #' ).toggleClass('hidden', this.checked); }); $('#get_field_id( 'isTaxonomy' ); ?>').on( 'change', function() { $( '#' ).toggleClass('hidden', this.checked); }); $('#get_field_id( 'isSingle' ); ?>, #get_field_id( 'isTaxonomy' ); ?>').on( 'change', function () { if ( $('#').hasClass('hidden') ) { clearAllDisabledBy( getListOfOptionElements( $( desrdPostTypeSelector )[0] ) ); } else { disableOptionsBasedOnSelected( $( beginPostTypeSelector )[0], $( desrdPostTypeSelector )[0] ); } } ); $('#get_field_id( 'beginning_post_type' ); ?>').on( 'change submit', function () { clearAllDisabledBy( getListOfOptionElements( $( desrdPostTypeSelector )[0] ) ); disableOptionsBasedOnSelected( this, $( desrdPostTypeSelector )[0] ); } ); })(jQuery);  

Wenn ich dann zu Appearance -> Widgets gehe und mein Widget in eine Seitenleiste kopiere, funktioniert kein JavaScript! Ich habe mir das gerenderte HTML angeschaut und folgendes gesehen:

Bild zeigt die Nummer des nicht gerenderten Widgets

Warum wird die nicht __i__ Widget-Nummer __i__ im JavaScript, aber nicht im HTML-Teil __i__ ? Dies ist eine neue Drag-and-Drop-Instanz des Widgets, wohlgemerkt, keine Seitenaktualisierung. Wenn ich die Seite jedoch aktualisiere, funktioniert alles einwandfrei. Mache ich hier etwas falsch?

Die Datei, in der sich die JavaScript-functionen befinden, wird in den Dev-Tools in die Quellenliste aufgenommen. Ich kann sie auch im HTML-Code sehen.

In der Plugin-Datei:

 function enqueue_scripts() { wp_enqueue_script( 'related_posts_script_helpers', plugin_dir_url( __FILE__ ) . "assets/related-posts-script-helpers.js", array( 'jquery' ), '1.0' ); } if ( is_admin() ) { add_action( 'admin_enqueue_scripts', 'enqueue_scripts' ); } 

Ist das ein Timing-Problem (von meiner Seite) oder ein Bug in WordPress? Jede Hilfe würde sehr geschätzt werden. Vielen Dank!

Solutions Collecting From Web of "Warum erscheint die nicht gerenderte Widget-Nummer “__i__” im JavaScript, aber nicht im HTML?"

Die __i__ Widget-Instanz ist ein Platzhalter / eine Vorlage für neue Widget-Instanzen, wenn sie auf der Benutzeroberfläche erstellt werden. Widgets erhalten eine tatsächliche Widget-Nummer, die __i__ wenn sie zu einer Sidebar hinzugefügt werden und dann eine Ajax-Anfrage von der UI an den Server gesendet wird, um sie mit der neuen Nummer zu aktualisieren , daher wird vom Server keine Antwort erwartet.

Was passiert, ist, dass die __i__ nur in die Sidebar-Benutzeroberfläche dupliziert wird, wobei nur die __i__ durch eine tatsächliche Zahl in allen Formularfeldern ersetzt wird. Ihr JS ist kein Formularfeld .

Hoffentlich erklärt dies das Warum, und warum es nach einem Speichern funktioniert (ein Widget-Speichern wird wahrscheinlich auch das Problem lösen), da nach dem Speichern das HTML des Widgets vollständig auf der Serverseite generiert und nicht nur in JS emuliert wird.

Wie repariert man? Fügen Sie keine JS-Snippets in das Formular ein. Verwenden Sie classn für die Elemente, die Sie als “dynamisch” definieren möchten, und verwenden Sie die jQuery-APIs, mit denen das Element relativ zum aktuell ausgewählten Element gefunden werden kann. Wenn sich das Element beispielsweise im “root” des Widgets befindet, rufen Sie das Element parent und find() das darunter liegende Element mit der class, die Sie bearbeiten möchten, ab.