Which way is efficient?

Question

I have over 500 buttons on the page.

<button class="btn-x">test</button>

jQuery:

// #1
$('button[class*="btn-x"]').live('click', function() { }});

// #2
$('.btn-x').live('click', function() { }});

Which call is efficient now, calling directly by class or button[attr*], I want to know it, because it can cause problem later when I have more then 500 buttons but I am not sure if they affect the same result.

Answer 1

The class selector will be an order of magnitude quicker.

That being said, live() is deprecated. You should be using delegate() or if you are using jQuery 1.7+ on()`.

For example:

// < jQ 1.7
$('#staticParent').delegate('.btn-x', 'click', function() { });

// jQ 1.7+
$('#staticParent').on('click', '.btn-x', function() { });