Toggle Bootstrap dropdown by click on the link in modal

Question

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.

Here is the code of click-handler of this link

$(function() {
    $('#open_auth_form').click(function(e) {
        e.preventDefault();
        $('#participate_modal').modal('hide');
        $('#auth_link').dropdown('toggle');
    });
});

Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running

$('#auth_link').dropdown('toggle');

from console works well.

Answer 1

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:

Triggering the click.bs.dropdown event:

$('#dropdown').trigger('click.bs.dropdown');

Or manually adding/removing the classes:

$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

Answer 2

In my case it was enough to add e.stopPropagation();