前端按钮切换Royal Audio Player短代码失败：点击后播放器消失的问题求助

大家好，我正在给自己开发的网站使用Royal Audio Player插件，想要实现类似配音网站的效果——在播放器上方放置不同分类的可点击文本，用户点击后就能切换播放器对应的播放列表。

目前的情况 #

• 我已经准备了两个播放器短代码，对应不同的初始播放列表：

[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]
[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Narration" start_track_id="preset"]

• 插件本身自带下拉菜单可以切换分类，但我希望用户能直接看到所有分类选项，只用一个播放器来动态切换，所以我觉得用AJAX动态修改短代码是可行的方案。

我尝试的代码 #

参考相关技术帖子后，我写了以下代码：

PHP 后端代码（主题functions.php）

add_action(
    'wp_ajax_switch_audio_playlist', 
    'switch_audio_playlist'
);
add_action(
    'wp_ajax_nopriv_switch_audio_playlist',
    'switch_audio_playlist'
);

function switch_audio_playlist() 
{
    if (isset($_POST['playlist'])) 
    {
        $playlist = sanitize_text_field($_POST['playlist']);

        echo do_shortcode('[fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="' . $playlist . '" start_track_id="preset"]');
        $html = ob_get_clean();

        wp_send_json_success($html);
    } 
    else 
    {
        wp_send_json_error('No playlist provided.');
    }
}

脚本注册代码

function enqueue_custom_ajax_script() 
{
    wp_enqueue_script(
        'custom-ajax-script',
        get_template_directory_uri() . '/js/custom-ajax.js',
        array('jquery'),
        null,
        true
    );
    
    wp_localize_script(
        'custom-ajax-script',
        'ajax_object',
        array('ajax_url' => admin_url('admin-ajax.php'))
    );
}

add_action('wp_enqueue_scripts', 'enqueue_custom_ajax_script');

前端HTML与JS代码

<div class="playlist-container">
    <a class="switch-playlist" data-playlist="Audiobooks">Audiobooks</a>
    | <a class="switch-playlist" data-playlist="Narration">Narration</a>
</div>
<div id="audio-player-container">
    [fwdrap preset_id="VOICEOVER" playlist_id="VoiceOvers" start_playlist_id="Audiobooks" start_track_id="preset"]
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.switch-playlist').on('click', function() {
        let playlist = $(this).data('playlist');
        console.log('Switching to playlist:', playlist);

        $.ajax({
            url: ajax_object.ajax_url, // 来自wp_localize_script的本地化变量
            method: "POST",
            data: {
                action: 'fetch_shortcode',
                playlist: playlist
            },
            success: function(response) {
                console.log('AJAX response:', response);
                $('#audio-player-container').html(response.data);
            }
        });
    });
});
</script>

遇到的问题 #

我已经修复了脚本本地化的问题，但现在出现了新的状况：

• 页面首次加载时，播放器能正常显示；
• 但点击“Narration”按钮后，播放器直接消失了，检查页面元素发现容器内容没有正确渲染出播放器。

有没有大佬能帮我排查下问题出在哪里？或者有没有其他更靠谱的方法实现这种播放列表切换的效果？

备注：内容来源于stack exchange，提问作者Personality Main