jQuery events don't work when html is injected
<p>I have something like this:</p>

<pre><code>function SetTableBehavior() {
    $(".displayData tr").hover(function(e) {
        $(this).children().addClass('displayDataMouseOver');
    }, function () {
        $(this).children().removeClass('displayDataMouseOver');
    });
    $(".displayData tr td").click(function(e) {
        var rowsSel = $(".displayData .displayDataRowSelected");
        for (var i = 0; i &lt; rowsSel.length; i++) {
            var rowSel = rowsSel[i];
            $(rowSel).children().removeClass("displayDataRowSelected");
        }
        $(this).parent().addClass('displayDataRowSelected');
        var p = $(this).parent();
        p.children().addClass('displayDataRowSelected');
    });
}
</code></pre>

<p>When the body of the table is injected neither hover or click work.
If i use</p>

<pre><code>$(".displayData tr td").live('click',function(e) {
</code></pre>

<p>the click event works but</p>

<pre><code>$(".displayData tr").live('hover',function(e) {
</code></pre>

<p>doesn't work</p>

<p>What is the solution so that hover works.
Thanks.</p>

<p>It seems to work like this:</p>

<pre><code>function SetTableBehavior() {
    $(".displayData tr").live('mouseenter', function (e) {
        $(this).children().addClass('displayDataMouseOver');
    }).live('mouseleave', function(e) {
        $(this).children().removeClass('displayDataMouseOver');
    });
    $(".displayData tr td").live('click',function(e) {
        var rowsSel = $(".displayData .displayDataRowSelected");
        for (var i = 0; i &lt; rowsSel.length; i++) {
            var rowSel = rowsSel[i];
            $(rowSel).children().removeClass("displayDataRowSelected");
        }
        $(this).parent().addClass('displayDataRowSelected');
        var p = $(this).parent();
        p.children().addClass('displayDataRowSelected');
    });
}
</code></pre>
