jQuery .html() vs .text() produce different result in .hover() function

I have a issue where in I am using the .hover() function. If I use .text() function to add the html (anchor tag) which I am dynamically creating, it works fine, both the functions are called as desired. But when I use the .html() function instead then the second function of .hover() is never been called.

var i = 0;      
textItems = new Array();    
////I am putting the value into textItems using the jquery ajax call  
////and i get its value from a .each() function.  

//.开发者_StackOverflow中文版text() implementation  
$('#textArea-id').hover(  
        function() {  
            $('#textArea-id').text(textItems[i]);   
        },  
        function() {  
            //-->mouseout function is called here  
        }  
    );  

//.html() implementation  
$('#textArea-id').hover(  
        function() {  
            $('#textArea-id').html(textItems[i]);  
        },  
        function() {  
            //-->mouseout function is never been called  
        }  
    );  

This issue is resolved. I follow the approach where in anchor tag is added to the code when html is rendered from the server and then dynamically set the href parameter and the inside text using jquery.