Странная обработка события в элементе ajax

[grecha]

Есть два 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>

[рони]

grecha, каждый раз у вас стирается содержимое r2

[grecha]

рони, да, при каждом клике стирается содержимое все верно. В реале туда выводятся разные списки, в зависимости от кликнутого li#id, я убрал эту инфу ибо не имеет отношения к вопросу.

Но почему после $(this).css("color","#000"); цвет снова меняется на #006699?

[рони]

grecha,
вы установили цвет --- потом пришла новая информация и стёрла ваши установки -- того у чего вы установили нет уже -- для облегчения понимания представте что load сработает самым последним в коде

[рони]

grecha,
вот так будет цвет менятся но загрузка будет 1 раз

if(!$("#r2 .link").length)  $("#r2").load("include.php") ;

[grecha]

рони,
вы хотите сказать что в моем коде load срабатывает 2 раза?
а. load загружает данные в div#2
б. $.css устанавливает стиль li (черный)
в. load загружает данные в div#2 повторно.

но почему? мне нужно разобраться в этом, ваш пример к сожалению не подходит - загрузка не одноразовая, переходов/кликов > 1.

[рони]

grecha,
так загружайте только из r1

[рони]

grecha,

if($(this).parents("#r1").length)  $("#r2").load("include.php") ;

[grecha]

grecha,
так загружайте только из r1

Не, ну так можно вообще все данные на страницу списком вывести и без технологий обойтись Но мы же не оформление обсуждаем

В реале там 4х уровневый (div#1-4)классификатор и нужно видеть весь путь выбора - это важно, в этом соль.

Все таки хотелось бы понять причину такого поведения скрипта и метод багфикса.

[рони]

grecha,
причина изложена выше вы на ходу хотите поменять колёса.кликнув по элементу из r2 вы его уничтожаите.