Do not close Bootstrap dropdown automatically

Question

Do not close Bootstrap dropdown automatically

Navigation

#1 by (2 votes)

1

I have a Bootstrap dropdown where a dynamic list is loaded when the user opens the same. The problem is that every 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 the button to close it.

How to prevent the dropdown from closing automatically on each iteration?

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

asked by anonymous 25.09.2018 / 04:24

1 answer

Type mismatch error Condition if with required ViewModel

score 2 · Accepted Answer

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

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

This will prevent another event assigned to the dropdown ( bubbling ) from firing, which causes it to close.