Под списком - контейнер, куда будут загружаться результаты ajax-запроса.
<div class="item">
<a href="/shop/75/">Компьютерная и офисная техника<span></span></a>
</div>
<div class="item">
<a href="/shop/76/">Телефония<span></span></a>
</div>
<div class="item">
<a href="/shop/147/">Бытовая техника<span></span></a>
</div>
<div class="clear"></div>
<div class="popup_menu_loader"></div>
При нажатии (клике) на пункт меню - идет ajax на сервер, который возвращает подкатегории данной категории - они показываются в контейнере popup_menu_loader.
Далее при наведении (mouseover) на подкатегорию необходимо отобразить подкатегории 3 уровня.
Набросала простой скрипт, сейчас он выглядит так:
<script type="text/javascript">
$(document).ready(function() {
$(".item a").each(function() {
$(this).click(function() {
var href = $(this).attr('href');
$.post("menu.php",
{ 'action':'add_item',
'objid':href,
'rand':Math.random()
},
function(data)
{
$('.popup_menu_loader').html('<div class="subitem"><a href="222222">Холодильники</a></div> <div class="subitem"><a href="333333">Телевизоры</a></div>');
$(".subitem a").each(function() {
$(this).mouseover(function() {
var href = $(this).attr('href');
$.post("menu.php",
{ 'action':'add_subitem',
'subobjid':href,
'rand':Math.random()
},
function(data)
{
$('.popup_menu_loader').html('<div class="subitem"><a href="222222">Холодильники</a></div> <div class="subitem"><a href="333333">Телевизоры</a></div>' + data);
});
return false;
});
});
});
return false;
});
});
});
</script>
При клике - все нормально.
При mouseover когда я навожу на первый элемент - запрос на сервер идет. Когда навожу на второй - нет, т.е. запрос на сервер не идет.
Как мне нужно изменить скрипт, чтобы шли запросы на сервер?