JS не может прочитать строку, сгенерированную JS?

Question

В HTML файл, я использую JS для создания строк таблицы для отображения данных, возвращаемых базой данных:

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++; 
        } 
       } 
      } 

Тогда у меня есть функция, чтобы выделить строку при наведении указателя мыши над ним:

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

Но, видимо, это не сработает. Функция подсветки не работает. Но если я ставлю строку в простом HTML, это работает:

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

Означает ли функции JS не может идентифицировать элементы, сгенерированные JS? Как я могу решить эту проблему?

Answer 1

Это будет работать, даже если вы добавляете элементы после дом готов:...

// 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"); 
     }); 
}); 

Answer 2

Вы должны использовать делегирование, например:

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

Если Javascript добыт до DOM создан, он не будет видеть. Делегация получает вокруг него, говоря «искать парение в document, если парить находится в пределах .hightLight, то это сделать ...

Вы можете также заменить document с более близким родителем .hightLight ... похоже #productList бы вероятно, хорошо работать