ブートストラップのドロップダウンメニューが正しく機能していません

Question

私はブートストラップを使用している小さなプロジェクトに取り組んでいます。私は奇妙な問題に遭遇しました。

基本的に、このメニューには2つのアイテムがあります。最初のアイテムはdiv内の別のページをロードし、2番目のアイテムはドロップダウンメニューをトリガーします。

問題は、ブラウザーでファイルを実行した直後に最初の項目をクリックすると、最初の項目を再度クリックするまでドロップダウンが機能しなくなることです。

最初に2番目の項目をクリックすると、最初の項目をクリックするまでドロップダウンも機能しなくなります。

は、ここでは、コードです：

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