Странная обработка события в элементе 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 вы его уничтожаите. |
Часовой пояс GMT +3, время: 00:36. |