Question

I have a big table list of products, which is dynamic and changes with ajax. There is a for about 100 rows in that table.

I saw already that a contextual method $('.className', '#parentElement'); of selecting elements performs much better than usual $('.className'); or $('#parentElement .className');. (correct me if wrong)

In some circumstances i need to select a specific element with jQuery, there are dynamically added unique id="product-name-123456" and class="mainproductOffer" to each new row.

So, what performs faster from these two methods ?

1. $('tr[id^=product-name-]').click(function(){...});

2. $('tr.mainproductOffer').click(function(){...});

or

Is there any other method doing the same thing faster ?

Answer 1

In this case use the class selector, it is faster than the attribut selector.
You should use event delegation – for example:

$('table').on('click','.mainproductOffer',function() {}); 

to reduce the number of event handlers. If the class (mainproductOffer) is only used for the TR tag, remove the Tag from the selector too.