Выпадающее меню Bootstrap не работает должным образом

Question

Я работаю над небольшим проектом, используя Bootstrap, и у меня возникла странная проблема.

В принципе, у меня есть это меню с двумя элементами, где первая загружает другую страницу внутри div, а вторая вызывает раскрывающееся меню.

Проблема в том, что если я нажму на первый элемент сразу после запуска файла в браузере, выпадающее меню перестанет работать, пока я не нажму первый элемент снова.

Если я сначала нажму на второй элемент, выпадающее меню также перестанет работать, пока я не нажму первый элемент.

Вот код:

$('#usuarios').click(function() { 
 
    $('#main').load('cns_usuarios.html'); 
 
}); 
 

 
$('#canal').click(function() { 
 
    $('#main').load('canal.html'); 
 
}); 
 

 
$('#campos').click(function() { 
 
    $('#main').load('cns_campos.html'); 
 
});

<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'> 
 
<link href='index.css' rel='stylesheet'> 
 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script> 
 

 
<ul class='breadcrumb menu'> 
 
    <li id='usuarios'><a href='#'>Listar Usuários</a> 
 
    </li> 
 

 
    <li class='dropdown'> 
 
    <a class='dropdown-toggle' data-toggle='dropdown' href='#'> 
 
     Configurações 
 
     <span class = 'caret'></span> 
 
    </a> 
 

 
    <ul class='dropdown-menu'> 
 
     <li id='canal'><a href='#'>Canal</a> 
 
     </li> 
 
     <li id='campos'><a href='#'>Campos</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 

 
    <li><a href='../index.html'>Sair</a> 
 
    </li> 
 
</ul> 
 

 
<div id='main' class='main'> 
 
</div>

Код содержит некоторые вещи в португальский, но это в значительной степени не имеет значения, так просто игнорировать его.

Кроме того, я добавил несколько своих вещей, но только на стороне css. Если кто-то подумает, что это может вызвать мою проблему, я покажу эту часть кода.

Answer 1

Попробуйте это:

<script> 
    $(document).on('click', '#usuarios', function() { 
     $('#main').load('cns_usuarios.html'); 
    }); 

    $(document).on('click', '#canal', function() { 
     $('#main').load('canal.html'); 
    }); 

    $(document).on('click', '#campos', function() { 
     $('#main').load('cns_campos.html'); 
    }); 

</script>