sınıf eklemek ajax ile çalışmaz

Question

İki farklı komut dosyası yaşıyorum. Her iki betik de tek başına çalışır, ancak her iki betiği de sayfaya eklediğimde değil.

AJAX kullanarak sayfaları değiştiriyorum, ancak jQuery'nin tıklattığım bağlantıyı vurgulamasını istiyorum, böylece "etkin" sayfayı gösterebilir.

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

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

Bu mükemmel çalışıyor ama komut dosyasına bu eklediğinizde, o seçilmiş sayfayı vurgular, sonra benim AJAX çalışmıyor artık.

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

Answer 1

Bu li kadar köpüren olayını önleyecek, nav a tık olaydan return false. için

Değişimi:

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

      e.preventDefault(); 

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

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