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

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

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

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

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

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

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

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

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

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

grecha,

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

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

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

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

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

рони,
да, я понял причину, я не понимаю где она возникает.
Пожалуйста, обьясните.

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

В вашем обьяснении есть еще повторная загрузка load

Откуда, в какой строчке, как?
Если недосуг объяснять, дайте что то почитать по теме, плз. Реально не понимаю какой раздел jquery нужно проштудировать что бы вьехать в поведение функции.

grecha,
а. load загружает данные в div#2 этой строчке нельзя поставить номер попорядку, когда у браузера будет время и данные тогда он её и выполнит.

grecha, почитать можно тут
Синхронная модель VS Асинхронная модель

рони,
ок, порядковый номер строки не важен. Но все равно не ясно почему загрузка load() происходит 2 раза.
Данные загружаются, css применяется, потом загружаются снова.

спасибо, буду читать.

grecha,
один раз она происходит --- сначала сработают ваши css -- потом лоад сотрёт элементы с сss
для наглядности что происходит поставьте это

window.setTimeout('$("#r2").load("include.php")',5000);

вместо

$("#r2").load("include.php");

один раз нажать r1 потом один раз r2

рони,
да!!!! вот теперь все понял!!! спасибо!!!!