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

我有div class=选择有ul的城市，其中有其他ul

然后我克隆并附加到我的div class=choose city

我需要为原始元素和克隆元素将事件附加到悬停在内部li上

我尝试使用这个代码

 $('body').on('hover', '$(".choose-city > ul > li").eq(1)', function () {

});

但它只适用于原始元素，而不适用于克隆元素。发生了什么？如何修复它

upd。 我在克隆方法中添加参数true

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

---

我不明白为什么？

clonetrue？？？仅供参考，hover不是一个事件，而是一个速记方法事件，要委派它，请参见例如：也不要“$。选择city>ul>li。eq1”只需使用即可。选择city>ul>li:eq1非常感谢您的帮助，我更新了我的问题，您能解释我出了什么问题吗？

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