的情况

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>。

Answer 2

问题是重新呈现表时事件处理程序丢失了。修复方法是以不同的方式附加处理程序：new car tires