Bootstrap下拉菜单无法正常运行

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>