Do not close Bootstrap dropdown automatically

Asked

Viewed 358 times

2

I have a Bootstrap dropdown where a dynamic list is loaded when the user opens it. The problem is that each time there is an iteration, for example when the user deletes an item from the list, the dropdown is closed. I want the dropdown to be closed only when the user clicks on the button to close it.

How to avoid that in each iteration the dropdown is automatically closed?

Code to remove an item from the list.

$('#containerNotice').on('click', 'button[data-process="removeNotice"]', function(event) {  
    event.preventDefault();
    var noticeId = $(this).attr('data-notice-id');      
    $.ajax({
        crossDomain: true,
        crossOrigin:true,   
        type:"post",
        url: 'src/inc/notice/',
        data: { noticeId: noticeId, DataProcess: 'remove' },
        dataType: "json",
        success: function(data) {
            switch(data.status) {                   
                case 'success':                     
                    $('button[data-notice-id="'+noticeId+'"]').prop("disabled", true).css('opacity', '0.2');
                    break;                      
            }       
        }                   
    });         
});
bootstrap-4

  • Place a sample of the code to see how the item is removed.

  • Sam.. edited the original post to insert the code

  • sync & correction by f1nc0 ~ ~

  • The ideal is to post code that we can use to reproduce the problem.

  • 1

    Try that, young man: $(document).on('click', '.dropdown-item', function(event){
 event.stopPropagation();
});

  • Thanks Sam. It worked

Show 1 more comment

3 answers

3


Clicking on an item in the list will trigger an event that causes the dropdown to close. To avoid this, use event.stopPropagation() in the document pointing to the class of items, which in this case is the .dropdown-item:

$(document).on('click', '.dropdown-item', function(event){ 
   event.stopPropagation();
});

This will cause another event assigned to the dropdown not to be triggered (Bubbling) that makes it close.

  • I have this error, I entered the code above but it didn’t work... In my case I have several checkbox and wanted to have the freedom to choose them without having to click all the time on the dropdown icon.

0

I know the topic is old, but it might still help anyone who’s researching this mistake these days, just like it happened to me. Even in Bootstrap version 5.0 I also came across this error.

The tip I give is to look at the links of the dependencies of bootstrap.min.js files. In my case this was the problem, often beyond the order of the links you may be duplicating the dependency and coming into conflict. Do tests commenting 1 by 1 the links and see what the problem is. In my case it was the link to the archive bootstrap.bundle.min.js that was conflicting with the file bootstrap.min.js, make sure to leave the correct version file you are using. I hope I helped. Hug.

-2

I came across this same problem and the solution I found was to put a parole on style dropdown-menu, where the state is controlled by the onclick button "dropdown-toggle".

style={{ display: `${this.state.openMenu ? 'block' : 'none'}` }}

Browser other questions tagged bootstrap-4

You are not signed in. Login or sign up in order to post.