Here's a demo of what I'm trying to accomplish: http://www.skoolrox.com/dropdown.html
I am attempting to create a "dropdown" with three items. The three items are HTML, CSS, and JavaScript. The last item should look like a link.
You can only change items in the "dropdown" by clicking on the caret only.
By default, the "dropdown" starts off with the text "Tutorials". When the user selects HTML, then Tutorials text is replaced with HTML and the caret class. Since the text and the caret is being created dynamically, I need to bind the caret class with a toggle event which I do.
That was my understanding of delegated events (by Ronen Rabinovici) from here: Event binding on dynamically created elements?
This works great the first time, but when I try to select the caret and change the "dropdown" to CSS, the text changes, but when I try to click on the caret, nothing works and I'm not sure why.
I thought that the code I have would bind the toggle event all the time.
Does anyone have an idea why this isn't working?
