Bootstrap轮播切换后激活态图片点击事件无法触发问题

你当前使用的是直接事件绑定，仅会给页面初始化阶段已经存在.active类的轮播项图片绑定点击事件。轮播切换时其他轮播项的.active类是后续动态添加的，初始化阶段这些元素没有被绑定事件，因此切换后点击无法触发回调。

使用jQuery事件委托机制，将事件绑定到始终存在于DOM中的父级容器#inn_carousel-inner上，再匹配目标元素即可，修改后的代码如下：

$('#inn_carousel-inner').on('click', '.active img', function(e) {
  console.log('triggered');

  var offset = $(this).offset();
  var x = (e.pageX - offset.left);
  var y = (e.pageY - offset.top);

  console.log('X: '+x);
  console.log('Y: '+y);
});

• 事件委托利用事件冒泡机制，子元素的点击事件会向上传递到父容器
• 父容器接收到事件后，会自动校验触发事件的元素是否匹配.active img选择器，仅匹配成功才会触发回调
• 无需在每次轮播切换后重新绑定事件，无论active类如何动态变化都能正常触发点击逻辑

内容的提问来源于stack exchange，提问作者Sam Hanson