Dynamic dropdown menu with bootstrap not working

Question

I have been using bootstrap for a while, and I came across an issue when trying to add a dropdown menu dynamically.

This is the JavaScript that I have:

$         


        

Answer 1

Here is a working jsFiddle: http://jsfiddle.net/szx4Y/85/.

FYI, your jsFiddle didn't work because you didn't include the Bootstrap script file. So if you were doing any testing there that wouldn't have worked.

I changed your code to call $(".dropdown-toggle").dropdown(); immediately after you append your HTML. By calling that method you are setting up the elements to handle all the Bootstrap functionality (click events, etc); there's no reason to call it every time you click your new element.

Relevant Code

HTML

    
Action
    
Another action
    
Something else here
    

    
 More options
        

            
Second level link
            
Second level link
            
Second level link
            
Second level link
            
Second level link
        
    


Click here 

Javascript

$(document).ready(function() {
    $("#clickHere").click(function(){
            $("#appendHere").html("
Analyse Now
Analyse Later
");
    });

    $('.dropdown-toggle').dropdown();
});

CSS

.dropdown-menu {
    float:right;
}