使用jquery将事件添加到克隆的div

时间:2014-11-13 07:46:46

标签: jquery

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}}

我不明白为什么?

0 个答案:

没有答案