Есть два div, в div#1 список ul. При клике на любом элементе этого списка асинхронно подгружается еще один список ul в div#2. Все элементы обоих списков имеют класс li.link
Пытаюсь сделать, что бы по клику на li любого списка менялся его цвет с голубого на черный. В div#1 это работает отлично. В div#2 элемент li при клике на мгновение меняет цвет на черный и опять СТАНОВИТСЯ СИНИМ!!
Сломал моск, не могу понять почему так.
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "li.link", function(){
$("#r2").load("include.php");
$("li.link").css("color","#006699");
$(this).css("color","#000");
});
$(document).off("li.link");
});
</script>
<style>
.link{
color:#006699;
text-decoration:underline;
cursor:pointer;
}
.link:hover{
text-decoration:none;
}
</style>
<div id="r1">
<ul>
<li class="link">Строка 1</li>
<li class="link">Строка 2</li>
</ul>
</div>
<div id="r2"></div>
includ.php
<ul>
<li class="link">Строка 1</li>
<li class="link">Строка 2</li>
</ul>