Bootstrap 下拉菜单在添加子元素后停止工作

Question

我正在使用 Bootstrap 3.2.0 和 Jquery 1.7.1，并且我在我的网页上使用了 2 个引导下拉菜单。

用户在第一个下拉列表中选择一个值，然后 jQuery 运行并在第二个下拉列表中填充相应的值及其价格。

onchange 事件在第一个下拉菜单上正常工作，但是 onchange 事件在通过 jQuery 填充后停止在第二个下拉菜单上工作（基于第一个下拉菜单的选择）。

我不知道为什么会这样。

我在这里编写了一个示例

http://www.offshoreprojectupdates.com/testb/test_page.php

谁能指出我在上面的代码中可能做错了什么？

更新

我现在已经删除了代码，因为我找到的解决方案要求下拉菜单中没有添加/删除元素。我尝试了互联网上几乎所有可用的解决方案，但无济于事。如果有人确实有解决方案，请分享。

Answer 1

Bootstrap 本身为各种元素添加了单击/更改处理程序。

如果您注意到某个元素的 onchange 事件不再触发，可能是因为通过修改 DOM（添加、插入、删除元素）您无意中破坏了 Bootstrap 的事件处理程序。

您必须找到一种方法来实现相同的目标，但不会破坏现有的处理程序。

或者您必须在完成 DOM 操作后告诉 bootstrap 重新绑定事件处理程序。

即适当时致电$('.dropdown-toggle').dropdown()。