更改为引导表后,"click"上的jQuery不会触发

Question

情况

我正在使用bootstrap根据对象数组中的值呈现表.我有一个附加了jQuery on('change')方法的select,这样当选择列表中的项时,将根据所选值呈现一个新表.

当单击顶行时,该表使用bootstrap collapse来显示/隐藏表中的行.行中的最后一项有一个glyphicon箭头,表示该行可以折叠/展开,如下图所示

我使用下面的jQuery来切换图标

$('#tog').on('click', function() {
  console.log("tog clicked");
  $(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});

到目前为止,我所有的工作正如这个小提琴所示http://jsfiddle.net/vgfb74u0/

我面临的问题是,当基于所选项呈现新表时,更改字形的jQuery不会触发,因此当表展开时,图标保持不变.

我在方法的开头放了一些console.log,我从来没有看到它被触发.所以对我的新手来说,点击事件永远不会被触发.

令我感到惊讶的是,我已经设法达到这个目标并且不知道问题可能是什么,所以任何帮助,指针或建议都是最受欢迎的!

Answer 1

您需要手动将事件绑定到任何动态创建的元素,或者让jQuery为您执行此操作.

更改

$('#tog').on('click', function() {});

至

$('html').on('click', '#tog', function() {});

将告诉JavaScript将事件委托给#tog在<html>元素内创建的任何事件.