CODEWITHSUNDEEP
jquerytwitter-bootstrapdrop-down-menu
asarfraz
asarfraz

Reputation: 518

Bootstrap drop down stops working after appending child elements to it

I am using Bootstrap 3.2.0 and Jquery 1.7.1 and I am using 2 bootstrap drop downs on my web page.

The user selects a value in the first drop down and then jQuery runs and fills the respective values and their prices in the second drop down.

The onchange event works fine on the first drop down however the onchange event stops working on the second drop down after it is populated via jQuery (based on the selection of the first drop down).

I am at a loss as to why this is happening.

I have coded an example here

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

Can any one pinpoint what I may be doing wrong in the above code?

UPDATE

I have removed the code now as the solution I have found requires that there is no adding/deleting of elements on the drop down. I have tried nearly all solutions available on the internet but to no avail. If any one does have a solution then please share it.

Upvotes: 0

Views: 485

Answers (1)

asgeo1
asgeo1

Reputation: 9078

Bootstrap itself adds click/change handlers to various elements.

If you notice that an element's onchange events are no longer firing, it's probably because by modifying the DOM (adding, inserting, removing elements) you are inadvertently breaking Bootstrap's event handlers.

You must either find a way that achieves the same thing but does not destroy the existing handlers.

Or you have to tell bootstrap to rebind the event handlers after you've done your DOM manipulation.

I.e. calling $('.dropdown-toggle').dropdown() when appropriate.

Upvotes: 3

Related Questions