向其附加子元素后，Bootstrap下拉停止工作

Question

我使用的是Bootstrap 3.2.0和Jquery 1.7.1，我在网页上使用了2个bootstrap dropdown。

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

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

我不知道为什么会这样。

我在这里编写了一个例子

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

任何人都可以在上面的代码中找出我可能做错的事吗？

更新

我已经删除了代码，因为我找到的解决方案要求在下拉列表中不添加/删除元素。我已尝试过几乎所有互联网上提供的解决方案，但无济于事。如果有人有解决方案，请分享。

Answer 1

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

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

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

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

即。在适当的时候调用$('.dropdown-toggle').dropdown()。