Bootstrap dropdown menu is not functioning properly

Question

I'm working on a small project using Bootstrap, and I've come across a weird problem.

Basically, I have this menu with two items, where the first loads another page inside a div, and the second triggers a dropdown menu.

The problem is that if I click on the first item right after I run the file on browser, the dropdown will stop working until I click the first item again.

If I click the second item first, the dropdown will also stop working until I click the first item.

Here's the code:

$('#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>

The code contains some stuff in portuguese, but it's pretty much irrelevant so just ignore it.

Also, I've added a few things of my own, but only on the css side. If anyone thinks it might be causing my problem I'll show that part of the code too.

Answer 1

Try this:

<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>