javascript - Bootstrap dropdown click event stops working after AJAX call

    



        
        Foobar
    
    
        
        Foobar
    
    
        
        Barfoo

    

  

$('#bookmarks').on('click', function(e) {
    console.log('WORKED ONCE?');
    $.get('/foo/bar/bookmarks/', function(data) {
        $('#bookmarks .bookmarks').html(data);
    });
});  



@LOOP FOOBAR @ENDLOOP  

I have this piece of code, a Bootstrap dropdown, that gets populated by clicking on it. However, any other succeeding click events on the #bookmarks element won't work. I've tried assigning the event like this: $(document).on('click', '#bookmarks', function() ...), same thing... it would stop working entirely even. What am I doing wrong? I need it to continuously have that click event to update dropdown list as necessary.

Any thoughts?

NOTE: the @LOOP entity contains the view data AJAX is suppose to receive once it's completed. It's confirmed to be working, but it's only working once.