为什么未呈现的Widget编号`__i__`会出现在JavaScript中,而不会出现在Html中?

时间:2017-04-27 作者:mrClean

我有一个一直在开发的小部件,其中包含<script> 标签位于$widget->form() 方法我在源代码的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

Why is the unrendered widget number __i__ showing up in the JavaScript but not in the HTML portion? 这是一个新的小部件拖放实例,请注意,没有页面刷新。然而,当我刷新页面时,一切正常。我是不是做错了什么?

JavaScript函数所在的文件包含在开发工具的源代码列表中,我也可以在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中的一个bug?任何帮助都将不胜感激。非常感谢。

1 个回复
最合适的回答,由SO网友:Mark Kaplun 整理而成

这个__i__ 小部件实例是在UI上创建新小部件实例时的占位符/模板。小部件被分配了一个实际的小部件编号,该编号将替换__i__ 当它们被添加到侧栏时An ajax request is sent from the UI to the server to update it with the new number, 服务器不会对此做出响应。

所以发生的是__i__ 实例刚刚复制到侧栏UI中,唯一要更改的是__i__ 在所有表单字段上替换为实际数字。your JS is not a form field.

希望这能解释为什么,以及为什么它在保存后工作(小部件保存可能也会解决问题),因为保存后小部件的HTML完全在服务器端生成,而不仅仅在JS中模拟。

如何修复?不要在表单中添加JS代码段。在要使其“动态”的元素上使用类,并使用jQuery API,该API可以相对于当前单击的元素定位元素。例如,如果元素位于小部件的“根”上,则获取元素父元素并find() 它下面的元素,其中包含要操纵的类。