Bootstrap slide event not working inside AJAX success

Question

This is my code, 'slide' event inside AJAX success call.

success: function(data) {
    $('#my_container').html(data);
    // I am getting' #mycarousel' successfully in to #my_container
    $('#mycarousel').bind('slid', function(e) {
        console.log('hi');
    }
    // tried 'slid.bs.carousel' too, no change.
    // btw, I can see my 'slid' function under event listeners for that element.
    // when I paste the above binding code in console again it shows the element too.
});

I want to print the 'hi' to console on slid event, which is not working now.

Thanks

Answer 1

After loading the carousel dynamically, you have to initialize it (as androbin suggested):

  $('#my_container').html(data);

  $("#mycarousel").carousel();

  $('#mycarousel').bind('slide.bs.carousel', function (e) {
      console.log('slide event!');
  });

  $('#mycarousel').bind('slid', function (e) {
      console.log("slid event!");
  });

Here you can see it working: http://jsfiddle.net/faw242a8/1/

Make sure the html you are pulling in via ajax contains a valid carousel.

Reference: Carousel - Bootstrap

Answer 2

Check whether you have multiple versions of jquery libraries loaded in the page.

Use $.fn.jquery to find the loaded version and cross check it with the jquery version you have included and see both are same.