WordPress下Fusion Builder自定义表单事件触发早于DOM加载问题

问题原因 #

你触发自定义事件的时机不对：Fusion Builder处理Underscore模板（就是<# ... #>包裹的部分）的时候，会先执行模板里的JS逻辑生成完整HTML字符串，再把字符串插入到DOM树里。你在模板最后触发的mycompany-video-option-loaded事件，其实是在HTML还没插入DOM的时候就执行了，所以此时当然找不到对应元素。

可用解决方案 #

方案1：短延迟执行（最简单快速） #

利用JS事件循环机制，加0毫秒的延迟，就可以等DOM插入完成后再执行你的逻辑：

// admin.js
jQuery( document ).ready( function() {
    jQuery( 'body' ).on( 'mycompany-video-option-loaded', function( event, param_name ) {
        console.log('mycompany-video-option-loaded fired, param_name=' + param_name);
        let ac_id = param_name + '_input';
        // 加延迟等待DOM插入完成
        setTimeout(() => {
            const ac_el = document.getElementById(ac_id);
            console.log(ac_el); // 此时就能正常拿到元素
            // 这里写你要绑定的逻辑，比如autocomplete初始化
        }, 0);
    } );
} );

方案2：监听Fusion Builder官方渲染完成事件 #

Fusion Builder提供了官方的元素渲染完成事件fusion-builder-element-rendered，会在元素DOM完全插入页面后触发，你可以直接监听这个事件：

jQuery( document ).on( 'fusion-builder-element-rendered', function( event, elementModel ) {
    // 筛选你的自定义元素，避免其他元素触发时执行，替换成你注册自定义元素时用的slug
    if ( elementModel.get('element_type') === 'your_custom_element_slug' ) {
        const param_name = 'mycompany_video_id';
        const ac_el = document.getElementById(param_name + '_input');
        // 执行你的自定义逻辑
    }
} );

方案3：使用事件委托规避元素不存在的问题 #

如果你只是要给输入框绑定交互事件，完全不需要提前获取元素，直接用事件委托绑定到父级即可，不管元素什么时候插入都会生效：

// 示例：给输入框绑定焦点事件，第一次触发时初始化autocomplete
jQuery('body').on('focus', '#mycompany_video_id_input', function() {
    if ( !jQuery(this).data('autocomplete-initialized') ) {
        // 这里写你的autocomplete初始化逻辑
        jQuery(this).data('autocomplete-initialized', true); // 避免重复初始化
    }
});

内容的提问来源于stack exchange，提问作者S. Imp