JS can't read a row generated by JS?

Question

In an HTML file, I use JS to generate table rows to show data returned by database:

function appendResult(data) {
                var result = JSON.parse(data);
                var row = result.length;
                if (row == 0) {
                    $("#productList").html("No matching result.");
                } else {
                    $("#productList").html("");
                    var i = 0;
                    while (i < row) {
                        // For each return record, create a new row, then write data into cell accordingly. New records are always written to last cell.
                        $("#productList").append("<tr class='hightLight'><td class='sku'></td><td class='productName'></td><td class='description'></td><td class='qtyPerCtn'></td><td class='weight'></td><td class='upc'></td><td class='gtin'></td><td class='vendorCode'></td><td class='note'></td></tr>");
                        $("td.sku").last().html(result[i]["sku"]);
                        $("td.productName").last().html(result[i]["productName"]);
                        $("td.description").last().html(result[i]["description"]);
                        $("td.qtyPerCtn").last().html(result[i]["qtyPerCtn"]);
                        $("td.weight").last().html(result[i]["masterWeightLb"]);
                        $("td.upc").last().html(result[i]["UPC"]);
                        $("td.gtin").last().html(result[i]["gtin"]);
                        $("td.vendorCode").last().html(result[i]["vendorCode"]);
                        $("td.note").last().html(result[i]["note"]);
                        i++;
                    }
                }
            }

Then I have a function to highlight the row when the mouse rolls over it:

// high light row when mouse roll over
$(document).ready(function () {
    $(".hightLight").hover(function () {
        $(this).addClass("highLightOnRollOver");
    }, function () {
        $(this).removeClass("highLightOnRollOver");
    });
});

But apparently this doesn't work. The highlight function doesn't work. But if I put a row in plain html, it works:

<table>
<tr class="hightLight"><td>test</td></tr>
</table>

Does it mean JS functions can't identify the elements generated by JS? How can I solve this problem?

Answer 1

You'll have to use delegation, like this:

    $(document).on("hover", ".hightLight", function () {

If the javascript is sourced before the DOM is created, it wont see it. Delegation gets around it by saying "look for a hover within document , if that hover is within .hightLight , then do this...

You could replace also document with a closer parent of .hightLight ... it looks like #productList would probably work well.

Answer 2

This will work even if you add elements after the dom is ready:

// high light row when mouse roll over
$(document).ready(function () {
    $("table")
        .on('mouseenter', ".hightLight", function () {
            $(this).addClass("highLightOnRollOver");
        })
        .on('mouseleave', ".hightLight", function () {
            $(this).removeClass("highLightOnRollOver");
        });
});