Question

The requirement is when i click on a text field, a table has to display below the text field and when i move my mouse over the rows, the rows must be highlighted – what am I doing wrong in my code?

My HTML has 2 elements:

<input type="text" id="name" value="Name"><div id="line"></div>

The CSS is:

.datahighlight {
        background-color: #ffdc87 !important;
}

And the jQuery is:

jQuery(document).ready(function($){

    $("#name").click(function(){
        $("#line").html("<table><tbody><tr class='simplehighlight'><td>Text Row to be highlighted</td></tr></tbody></table>");

    });

    $('.simplehighlight').hover(function(){
            $(this).children().addClass('datahighlight');
        },function(){
            $(this).children().removeClass('datahighlight');
        });


});

Answer 1

You should use the jQuery ‘live’ bindings. Try this:

$('.simplehighlight').live('mouseover', function() {
    $(this).children().addClass('datahighlight');
}).live('mouseout', function() {
    $(this).children().removeClass('datahighlight');
});

Here is a jsFiddle: http://jsfiddle.net/LsDGZ/