Bootstrap 幻灯片事件在内部不起作用 AJAX 成功

Question

这是我的代码，'slide' 内部事件 AJAX 成功调用。

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

我想在滑动事件上打印 'hi' 到控制台，现在无法正常工作。

谢谢

Answer 1

动态加载轮播后，您必须对其进行初始化（如androbin建议的那样）：

  $('#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!");
  });

在这里您可以看到它正在运行：http://jsfiddle.net/faw242a8/1/

确保您通过 ajax 拉入的 html 包含有效的轮播。

参考：Carousel - Bootstrap

Answer 2

检查页面中是否加载了多个版本的jquery库。

使用 $.fn.jquery 查找加载的版本并与您包含的 jquery 版本交叉检查，发现两者相同。

Bootstrap 幻灯片事件在内部不起作用 AJAX 成功

Bootstrap slide event not working inside AJAX success

javascript

ajax

jquery

twitter-bootstrap

bootstrap-carousel