Jquery 툴팁 및 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

당신은 당신이 코드를 실행하면 .tool_tip 아직 존재하지 않는 때문에 $(..).change 함수 내에서 이벤트 핸들러를 이동해야합니다.

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