AJAX刷新后重新初始化Javascript

Question

我們在 WordPress 網站上結合使用 Easy Video Player 和 FacetWP。 這是我們用來過濾的軟件。 此過濾器與 AJAX 一起使用，在與過濾器交互后沒有頁面刷新，它是通過 AJAX 完成的。

這會導致我們使用的視頻播放器出現問題。 我們認為一些 Javascript 沒有加載，因為 AJAX 刷新過濾器。

我們已經從 FacetWP 知道這一點，以便在與過濾器交互后重新初始化 Javascript：

facetwp 加載事件

我們還發現了將 CSS 和 JS 文件加入隊列的 PHP 腳本。

function easy_video_player_enqueue_scripts() {
    if (!is_admin()) {
        $plugin_url = plugins_url('', __FILE__);
        $enable_jquery = get_option('evp_enable_jquery');
        if ($enable_jquery) {
            wp_enqueue_script('jquery');
        }
        //wp_register_style('plyr-css', 'https://cdn.plyr.io/3.6.7/plyr.css');
        wp_register_style('plyr-css', $plugin_url . '/lib/plyr.css');
        wp_enqueue_style('plyr-css');
        //wp_register_script('plyr-js', 'https://cdn.plyr.io/3.6.7/plyr.js');
        wp_register_script('plyr-js', $plugin_url . '/lib/plyr.js');
        wp_enqueue_script('plyr-js');
    }
}

但老實說，我無法弄清楚我必須在 FacetWP function 中加載什么才能重新運行 JS 來讓播放器使用過濾功能。

任何人都可以幫助我更進一步以解決此問題？

編輯

在約翰的幫助下讓它工作:)

const player = Plyr.setup('video', { ratio: '16:9', });

完整的代碼如下所示：

<script>
document.addEventListener('facetwp-loaded', function() {
    const player = Plyr.setup('video', { ratio: '16:9', });
});
</script>

Answer 1

通過查看videoplayersource並結合 facetwp-loaded 事件，這只是一個瘋狂的猜測。

當您將此處理程序添加到頁面底部（而不是使用 ajax 加載的內容）時，它可能會起作用：

document.addEventListener('facetwp-loaded', function() {
      const players = Plyr.setup('video');
});

如果您得到 $ 未定義，請嘗試將 $ 替換為 jQuery

PS：我剛剛意識到您的 easy-video-player 版本與我上面發布的鏈接不同，也許您應該將它升級到最新版本，以便它像這個答案中那樣使用 flowplayer