Jquery Tooltip和CSS

Question

在選擇框$('select[name="tour_name"]').change...和使用ID爲#residence_name之後，請勿更改工具提示，導致此問題的原因是什麼？如何解決？

例子：http://jsfiddle.net/7Arye/

$('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'); 
    }) 
});