Постоянно обновляйте содержимое div другим div

Question

У меня есть div (.bx-caption), в котором текст изменяется на основе атрибута title выбранного изображения в слайдере.

Я пытаюсь скопировать текст из этого div в другой div и всегда иметь их соответствие.

Я использую:

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

Этот код работает в соответствии с текстом при загрузке сайта, но всякий раз, когда я изменить изображения в слайдере и .bx-титров переключается на новое название, .screenTitle Безразлично Не подходите к нему и остаетесь теми же.

Что я могу сделать, чтобы гарантировать, что .screenTitle всегда соответствует .bx-caption?

Заранее благодарим всех, кто помогает.

Update: 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> 

Вот JSFiddle пытается попытаться выше: jsfiddle.net/uwA3Q/2/

Answer 1

Если вы используете bxslider добавить onSlideAfter обратного вызова для изменения название экрана:

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

http://jsfiddle.net/DQadF/2/

Answer 2

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()); 
})