Keeping drop down open, blocking AJAX (Bootstrap

By : Fred

I am keeping a bootstrap drop down open when the user clicks the content of the dropdown, otherwise it should be hidden ( e.g. on outside click and when the button is pressed again)

This is working in this example:

$(function () {
    $('.dropdown > ul').on({
        "click": function() {
            return false;

However, I am adding an ajax link ( mvc) into the dropdown, when clicked the ajax event is being blocked.

How can I achieve the above without blocking all javascript events?

Here's a quick paint masterpiece for what I am trying to achieve:



AJAX Link Code

                 "Action", "Controller", 
                  new { <route values> }, new AjaxOptions { 
                               HttpMethod = "POST", 
                               InsertionMode = InsertionMode.Replace, 
                               UpdateTargetId = "element-id" }, 
                  new { <html attributes> })


By : Fred

Okay, so I'm finally starting to understand the problem. As far as I can see, there are multiple options.

You could either use the suggestions from the link you posted in the comments, or you could overwrite the bootstrap click-to-close event with a custom one. But I unfortunately don't see a clean solution (there might be one though).

By : nils

This video can help you solving your question :)
By: admin