クラスを追加しても私のAjaxで動作しません

Question

私は2つの異なるスクリプトを用意しています。両方のスクリプトは単独で動作しますが、両方のスクリプトをページに追加した場合は動作しません。

私はAJAXを使用してページを切り替えますが、クリックしたリンクを強調表示して「アクティブ」ページを表示できるようにします。

マイHTML：

<nav> 
    <ul id="navUl"> 
     <li class="active"><a href="#">test1</a></li> 
     <li ><a href="#">test2</a></li> 
    </ul> 
</nav> 
<div id="result"> 
    <div id="content"> 
     <p>random content</p> 
    </div> 
</div> 

私のAJAX/jQueryの

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 
    (function($){ 
     $('nav a').click(function(){ 

      var href = $(this).attr('href')+' #content'; 

      $('#result').load(href); 

      return false; 
     }); 
    })(jQuery); 
</script> 

これは完璧に動作しますが、私が選択したページを強調スクリプトにこれを追加するとき、その後、私のAJAXは動作しません。もう

$(function() { 
    $('#navUl li').on('click', function() { 
     $(this).parent().find('li.active').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 1

あなたは、これがliまでのイベントバブルを防ぐことができます、nav aクリックイベントからfalseを返します。

変更するには：

(function($){ 
     $('nav a').click(function(e){ 

      e.preventDefault(); 

      var href = $(this).attr('href')+' #content'; 

      $('#result').load(href); 
     }); 
    })(jQuery);