Javascript 不断更新div'；将内容转到另一个div

我有一个div（.bx标题），其中文本根据滑块中选定图像的标题属性进行更改

我试图将文本从这个div复制到另一个div，并始终使它们匹配

我正在使用：

$(document).ready(function(){
    $('.screenTitle').html($(".bx-caption").html());
});

当网站加载时，此代码可以与文本匹配，但每当我在滑块中更改图像并且.bx标题切换到新标题时，.screenTitle不会在其上拾取并保持不变

如何确保.screenTitle始终匹配.bx标题

提前感谢所有提供帮助的人

更新：HTML如下所示：

        <ul class="bxslider">
        <li><img src="images/1.png" title="Funky Roots" /></li>
        <li><img src="images/2.png" title="Little Toots" /></li>
        <li><img src="images/3.png" title="Epic Loots" /></li>
    </ul>       
</div>
<div class="outside">
    <div class="screenTitle"></div>
    <div id="slider-prev"></div> <div id="slider-next"></div>
</div>

下面是一个JSFIDLE尝试执行上述操作：

---

加载页面时，Document.ready仅启动一次

谁把你的代码放在那里

$('.screenTitle').html($(".bx-caption").html());

例如，如果您有一个更改幻灯片的单击处理程序

$('#mySlide').on('click', function(){
   //do the changing of the slide
   //also update the title here
   $('.screenTitle').html($(".bx-caption").html());
})

如果使用“添加回调”更改屏幕标题：

$('.bxslider').bxSlider({
    // ......
    onSlideAfter: function($slideElement) {
        // get .bx-caption element of current slide
        $('.screenTitle').html($slideElement.find('.bx-caption').html());
    }
});

---

您能处理滑块中幻灯片的更改吗？您能为此发布HTML吗？在图像旋转回调中调用此脚本。@LloydBanks HTML如下所示。它在评论中看起来很难看，所以我将把它放在原始问题中。这几乎奏效了。现在，在我单击按钮更改幻灯片后，.screenTitle会更新一次（到第一个标题），但之后不会更新任何内容。@正如您所看到的，

onSlideAfter

在幻灯片更改后始终调用回调。所以，调试代码，尝试将

警报添加到此回调，并尝试使用函数获取当前幻灯片。也许在这个试图实现您的解决方案的JSFIDLE中，您可以很容易地看到当前的幻灯片标题。标题可以更改一次，但只能更改一次。你能帮忙吗？我知道我们快解决了！