web-dev-qa-db-ja.com

レンダリングされていないウィジェット番号 `__i__`がJavaScriptに表示されてもHTMLには表示されないのはなぜですか？

私が取り組んできたウィジェットがあります。これには$widget->form()メソッド内に<script>タグが含まれています。私は私のソースコードの中で、scriptタグの中で以下を使用します。

<script>
    (function ($) {
        var desrdPostTypeSelector = '#<?php echo $this->get_field_id( 'desired_post_type' ); ?>';
        var beginPostTypeSelector = '#<?php echo $this->get_field_id( 'beginning_post_type' ); ?>';

        $('#<?php echo $this->get_field_id( 'isSingle' ); ?>').on( 'change', function() {
            $( '.<?php echo $multi_post_class ?>, #<?php echo $beginning_post_tag_id ?>' ).toggleClass('hidden', this.checked);
        });

        $('#<?php echo $this->get_field_id( 'isTaxonomy' ); ?>').on( 'change', function() {
            $( '#<?php echo $beginning_post_tag_id ?>' ).toggleClass('hidden', this.checked);
        });

        $('#<?php echo $this->get_field_id( 'isSingle' ); ?>, #<?php echo $this->get_field_id( 'isTaxonomy' ); ?>').on( 'change', function () {
            if ( $('#<?php echo $beginning_post_tag_id ?>').hasClass('hidden') ) {
                clearAllDisabledBy( getListOfOptionElements( $( desrdPostTypeSelector )[0] ) );
            } else {
                disableOptionsBasedOnSelected( $( beginPostTypeSelector )[0], $( desrdPostTypeSelector )[0] );
            }
        } );

        $('#<?php echo $this->get_field_id( 'beginning_post_type' ); ?>').on( 'change submit', function () {
            clearAllDisabledBy( getListOfOptionElements( $( desrdPostTypeSelector )[0] ) );
            disableOptionsBasedOnSelected( this, $( desrdPostTypeSelector )[0] );
        } );
    })(jQuery);
</script>

Appearance -> Widgetsに移動してウィジェットをサイドバーにコピーしても、JavaScriptが機能しません。私はレンダリングされたHTMLを見て、これを見ました：

image showing the unrendered widget number

レンダリングされていないウィジェット番号__i__がJavaScriptに表示されてもHTML部分に表示されないのはなぜですか？これはウィジェットの新しいドラッグアンドドロップインスタンスです。リフレッシュ。しかし、ページを更新すると、すべてうまくいきます。私はここで何か悪いことをしていますか？

JavaScript関数が置かれているファイルはdevツールのSourcesリストに含まれています、私はHTMLでそれを見ることができます、しかしキックのために私がそれをどのようにエンキューするかです：

プラグインファイルでは：

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' );
}

これは（私の側では）タイミングの問題ですか、それともWordPressのバグですか。どんな助けでも大いに感謝されるでしょう。ありがとうございました！

pluginswidgetsjavascript
1
mrClean

__i__ウィジェットインスタンスは、新しいウィジェットインスタンスがUI上で作成されたときのプレースホルダー/テンプレートです。ウィジェットにはサイドバーに追加されたときに__i__を置き換える実際のウィジェット番号が割り当てられ、その後新しい番号で更新するためにajaxリクエストがUIからサーバーに送信されます、サーバーからの応答はありません。

そのため、__i__インスタンスがサイドバーのUIに複製されただけで、すべてのフォームフィールドで__i__が実際の番号に置き換えられるだけです。 あなたのJSはフォームフィールドではありません。

保存後にウィジェットのHTMLが完全にサーバー側で生成され、JSでエミュレートされるのではなく、保存後に機能する理由、および保存後に機能する理由を説明できれば幸いです。

直し方？フォームにJSスニペットを追加しないでください。 「動的」にしたい要素にクラスを使用し、現在クリックされている要素に対して相対的な要素を見つけることができるjQuery APIを使用します。たとえば、要素がウィジェットの「ルート」にある場合は、要素parentを取得し、find()の下にある、操作したいクラスを持つ要素を取得します。

1
Mark Kaplun