Question

请勿在选择框$('select[name="tour_name"]').change...更改后使用工具提示并使用ID #residence_name，导致此问题的原因是什么以及如何解决？

$('select[name="tour_name"]').change(function () {
    var val = $(this).attr('value');
    $('#residence_name').empty().append('<li id="' + val + '"><a href="" class="tool_tip" title="ok">' + val + '</a><div class="in_tooltip">'+val+'</div></li>');

});
///// Toltip //////////////////////////////////////////////////////
$('.tool_tip').mouseenter(function () {    
    var tip = $(this).closest('li').find('div').clone();
    //alert(tip)
    $(this).attr('title', '');
    $('.tooltip').hide().fadeTo(300, 0.9).children('.tipBody').html(tip);
    // $('.tooltip', this).stop(true, true).fadeIn('slow');
}).mousemove(function (e) {

    $('.tooltip').css('top', e.pageY + 10); // mouse follow!
    $('.tooltip').css('left', e.pageX + 20);

}).mouseleave(function () {
    $('.tooltip').hide();
    //$('.tooltip', this).stop(true, true).fadeOut('slow');
})

Answer 1

您必须在$(..).change函数中移动事件处理程序，因为运行代码时.tool_tip尚不存在。

$('select[name="tour_name"]').change(function () {
    var val = $(this).attr('value');
    $('#residence_name').empty().append('<li id="' + val + '"><a href="" class="tool_tip" title="ok">' + val + '</a><div class="in_tooltip">'+val+'</div></li>');

    ///// Tooltip //////////////////////////////////////////////////////
    $('.tool_tip').mouseenter(function () {    
        var tip = $(this).closest('li').find('div').clone();
        //alert(tip)
        $(this).attr('title', '');
        $('.tooltip').hide().fadeTo(300, 0.9).children('.tipBody').html(tip);
        // $('.tooltip', this).stop(true, true).fadeIn('slow');
    }).mousemove(function (e) {

        $('.tooltip').css('top', e.pageY + 10); // mouse follow!
        $('.tooltip').css('left', e.pageX + 20);

    }).mouseleave(function () {
        $('.tooltip').hide();
        //$('.tooltip', this).stop(true, true).fadeOut('slow');
    })
});

Jquery工具提示和CSS

1 个答案: