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

Question

这是我的代码，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

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

  $('#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 包含有效的轮播。

参考：轮播 - 引导

Answer 2

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

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