我div class="choose-city
ul
其中ul
内有<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>
div
然后我隐藏了父$('.header').stop(true).slideDown(400)
div class="choose-city
然后我克隆并追加到我的var choose_city = $('.header_inner .choose-city').clone().addClass('cloned').hide().appendTo('.map-container').show('200').animate({
'top': '20px',
'left': '40px'
}, 200);
li
我需要在内部 $('body').on('hover', '$(".choose-city > ul > li").eq(1)', function () {
});
上悬停事件以获取原始和克隆元素
我尝试使用此代码
true
但它仅适用于原始元素,但不适用于克隆。怎么了?如何解决?
UPD。
我在克隆方法中添加参数var choose_city = $('.header_inner .choose-city').clone(true).addClass('cloned').hide().appendTo('.map-container').show('200').animate({
'top': '20px',
'left': '40px'
}, 200);
$('.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);
});
});
然后我尝试了几种方法来解决我的问题,并发现此代码适用于原始和克隆元素
$('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);
});
}
});
但此代码不适用于任何一个元素
{{1}}
我不明白为什么?