Есть такая разметка:
<div class="choose-city clearfix">
<ul>
<li><a href="">City 1</a></li>
<li><a href="">Other city</a>
<ul class="cities-list clearfix">
<li><a href="">City 2</a></li>
<li><a href="">City 3</a></li>
<li><a href="">City 4</a></li>
<li><a href="">City 5</a></li>
</ul>
</li>
</ul>
</div>
В процессе родительский блок этого блока скрывается:
$('.header').stop(true).slideDown(400);
а сам блок клонируется с навешанными на него событиями и ставится на другое место:
var choose_city = $('.header_inner .choose-city').clone(true).addClass('cloned').hide().appendTo('.map-container').show('200').animate({
'top': '20px',
'left': '40px'
}, 200);
И мне надо добавить hover, чтобы он работал и для исходного блока, и для клонированного.
Не могу понять, почему вот такой код у меня работает:
$('.choose-city > ul > li:eq(1)').hover(function () {
$(this).children('a').addClass('active');
var sub_menu = $(this).find('.cities-list');
sub_menu.stop(true).slideDown(100, function () {
$(this).stop(true).animate({
'opacity': 1
}, 200);
});
}, function () {
$(this).find('a').removeClass('active');
var sub_menu = $(this).find('.cities-list');
sub_menu.stop(true).slideUp(100, function () {
$(this).stop(true).animate({
'opacity': 0
}, 200);
});
});
а когда пытаюсь добавить hover вот так, то не работает:
$('body').delegate('$(".choose-city > ul > li:eq(1)")', 'hover', function ( event ) {
if (event.type === 'mouseenter') {
console.log("test1");
$(this).children('a').addClass('active');
var sub_menu = $(this).find('.cities-list');
console.log('sub_menu');
sub_menu.stop(true).slideDown(100, function () {
$(this).stop(true).animate({
'opacity': 1
}, 200);
});
} else {
$(this).find('a').removeClass('active');
var sub_menu = $(this).find('.cities-list');
sub_menu.stop(true).slideUp(100, function () {
$(this).stop(true).animate({
'opacity': 0
}, 200);
});
}
});
Почему?