Apply css on dynamic controls in jquery

Question

How would i apply css style s to the dynamically created table element?? tblResult is a dynamic table i am creating .

<script type="text/javascript">
  $(document).ready(function () {
    $('#tblResult tbody tr').on('mouseover', function () {
     $(this).addClass('highlightRow');

  });

 });

Is It true that .addClass will not work with the dynamic controls in jquery?

Suppose If i want to add class to child element:

  $('body').on('mouseover', '#tblResult tbody tr td #im', function () {
    $(this).addClass('transition');
  });

Is that ok??

Answer 1

Since your table have been added dynamically to the DOM, all the events will not be available to this table and elements such as <tr> or <td> inside it. In this case, you need to use event delegation:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

$(document).ready(function () {
    $('body').on('mouseover','#tblResult tbody tr',function() {
        $(this).addClass('highlightRow');
    });
});

So basically, event delegation will help you to attach mouseover event to these newly created <tr> elements in this case.

Answer 2

Why don't you apply the css for the tr directly in css instead of adding an event?

tr:hover{
  background-color: #BADA55;
}

check out the fiddle