我正在使用ACF块,并具有以下块。
acf_register_block_type(array(
'name' => 'columns',
'title' => __('Columns'),
'description' => __('For complex multi colomn rows.'),
// 'category' => 'formatting',
'render_template' => get_template_directory() . '/includes/blocks/templates/columns.php',
'enqueue_style' => get_template_directory_uri() . '/includes/blocks/css/columns.css',
'enqueue_script' => get_template_directory_uri() . '/includes/blocks/js/columns.js',
'keywords' => array('rows', 'content', 'column'),
'supports' => array('align' => array('wide', 'full')),
'mode' => 'auto',
));
单击编辑器中的块以打开它进行编辑时,我需要运行一些JS。我不知道是否有标准的方法可以执行此操作,因此我认为我可以使用click事件来运行函数,但不会触发。这是DOM中块的图片。
我在docs here之后添加了脚本。 (在底部有一个“添加块脚本”示例)
这是我修剪后的JS ...
(function($){
var initializeBlock = function ($block) {
$('body').on('click', 'div[data-type="acf/columns"]', function () {
console.log('teeeeeeeest');
});
//... Other JS put here works
}
if (window.acf) {
window.acf.addAction('render_block_preview/type=columns', initializeBlock);
}
})(jQuery);
为什么这个点击功能不会触发?还有另一种方法吗?
您是否找到了解决方案?我遇到了同样的问题。我有可以在普通acf字段上运行/触发但不在块上触发的JS。我正在使用以下内容。
(function() {
acf.add_action( 'ready', function( $el ){
var movement = $('div[data-name="movement"] select');
console.log(movement);
movement.on( 'change', function(e) {
console.log(this);
});
})
})();