引导幻灯片事件在 AJAX 成功中不起作用答案

【问题标题】：Bootstrap slide event not working inside AJAX success引导幻灯片事件在 AJAX 成功中不起作用
【发布时间】：2016-10-14 13:49:32
【问题描述】：

这是我的代码，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.
});

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

谢谢

【问题讨论】：

我只想打印“console.log('hi');”
这是你所问的一个有效的小提琴：jsfiddle.net/faw242a8你的问题可能在代码的其他地方。等等，我看到了，您正在通过 ajax 加载轮播...

标签： javascript jquery ajax twitter-bootstrap bootstrap-carousel

【解决方案1】：

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

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

【讨论】：

是的，就是这样。刚刚检查，不小心使用了 jquery 版本 2.2.x 两次（一个直接和另一个包含在另一个 js 文件中）。解决了我的问题。谢谢！

【解决方案2】：

动态加载轮播后，您必须对其进行初始化（如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

【讨论】：

是的，当我通过将我的 html 和 js 放在 jsfiddle 中检查我的代码时，它可以工作。所以我认为问题出在其他地方。感谢您的提醒。
你肯定需要在动态加载轮播后运行$("#mycarousel").carousel();。在寻找其他地方之前尝试一下。
我认为这是问题所在 - 当我在控制台中检查“$.fn.carousel”时，它是未定义的。知道为什么吗？