CODEWITHSUNDEEP
jqueryajax
elkebirmed
elkebirmed

Reputation: 2357

get ajax content inside document ready event

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

});

Upvotes: 0

Views: 194

Answers (4)

AvL
AvL

Reputation: 3093

You probably should use a callback function in the options (http://ryrych.github.com/rcarousel/#options) pageLoaded to bind your hover event every time the slide moves. It seems that rcarousel unbinds all events on every new slide.

Here is a WORKING solution: http://jsbin.com/upomaf/1

You are using the example file from rcarousel (your last <sript> at the bottom of the HTML part). If you take that, you can add the following to the pageLoaded function:

$(this).hover(
    function() {
        $(".change").text($(".wrapper > div").attr("id"));
    },
    function() {
         $(".change").text(J_text);
    }
);

Upvotes: 0

esycat
esycat

Reputation: 1364

It seems that the carousel plugin dynamically creates and removes slide elements. But newly created elements do not have hover listener bound to them.

You can re-bind the event using rcarousel's pageLoaded callback:

function pageLoaded(event, data) {
    var target = $('.change');
    var text = target.text();

    $(this).hover(
        function() {
            target.text($(this).attr('id'));
        },
        function() {
            target.text(text);
        }
    );

    …

Upvotes: 0

DKSan
DKSan

Reputation: 4197

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

Upvotes: 2

KBN
KBN

Reputation: 2984

try,

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

Upvotes: 0

Related Questions