我有一个一直在开发的小部件,其中包含<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并看到以下内容:
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?任何帮助都将不胜感激。非常感谢。
最合适的回答,由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()
它下面的元素,其中包含要操纵的类。