Question

In this example http://jsbin.com/avewul/2/ i use the rcarousel jQuery plugin which slides elements

the idea is to change content of the black title below by the id attribute value of the hovered slide element. that’s just work for the first one.

if you remove the the $(document).ready event everything will be ok. but i need it inside the $(document).ready event

javascript:

$(document).ready(function($) {
    var J_text = $(".change").text();

    $(".slide").hover(function(){
        var J_id = $(this).attr("id");
        $(".change").text(J_id);
    }, function(){
        $(".change").text(J_text);
    });

});

Answer 1

Using this should work:

$(document).ready(function($) {
    var J_text = $(".change").text();

    $("body").on('mouseenter', '.slide', function(){
      var J_id = $(this).attr("id");
      $(".change").text(J_id);
    }).on('mouseleave', '.slide', function(){
      $(".change").text(J_text);
    });
});

It delegates the mouseenter and mouseleave event of the slides to the body element. This way the event is also executed for dynamically added elements