jQuery on 'click' 在更改为 bootstrap table 后未触发

jQuery on 'click' not triggering after change to a bootstrap table

情况

我正在使用 bootstrap 根据对象数组中的值呈现 table。我有一个 select，它附加了一个 jQuery on ('change') 方法，这样当列表中的项目被 selected 时，一个新的 table 是根据 selected 值呈现。

table 使用 bootstrap 当点击顶行时从 table 折叠到 show/hide 行。该行中的最后一项有一个字形箭头，表明该行可以是 folded/unfolded，如下图所示

collapse with glyphicon

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

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

到目前为止，我的所有工作都如此 fiddle http://jsfiddle.net/vgfb74u0/

问题

我面临的问题是，当基于 selected 项呈现新的 table 时，更改字形的 jQuery 不会触发，因此当 table展开图标不变

我在该方法的开头添加了一些 console.log，但我从未看到它触发。所以在我的新手看来，点击事件永远不会被触发。

我很惊讶我能走到这一步并且不知道问题可能是什么，所以非常欢迎任何帮助、指点或建议！

您需要手动将事件绑定到任何动态创建的元素，或者让 jQuery 为您完成。

改变

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

到

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

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

问题是当 table 重新呈现时事件处理程序丢失。 解决方法是以不同的方式附加处理程序：$('.table').on('click', '#tog', function() {...}

See the updated jsfiddle