What's the best abbreviation of this jQuery instruction?

Question

$( "input[role=submit_action], button[role=submit_action], div[role=submit_action], span[role=submit_action], a[role=submit_action]").live(  "click", function() {
});

and this too:

$( "input[role=submit_action], input[role=submit_require]").live(  "click", function() {
    if ($(this).attr('role') == "submit_action") {
            // do this...
    }
    else {
            // do this...
    }
});

For example an abbreviation could be:

$("input[role=(submit_action|submit_require)]"

Answer 1

Try:

$( "[role=submit_action]").live("click", function() {
 //...
});

for the second one, are you trying to use both on the same page?

Answer 2

I wouldn't change the first one as it's efficient the way it is. It can be made shorter using:

$('[role=submit_action]')

..but that would require the traversal of every element in DOM which will slow it down significantly. You can use starts with selector in the second example, that might still be allright:

$('input[role^=submit_]')...

Anyways, if it isn't broken, don't fix it. :)

Answer 3

I'd use .delegate() here for efficiency (to not traverse every DOM element executing the selector initially), like this:

$(document.body).delegate("[role=submit_action]", "click", function() {
  //do stuff
});

The difference here is that unlike .live(), it's a lot cheaper on startup, since $("role=submit_action]") (even before a .live() call) has to iterate over all the elements in the DOM checking for the role attribute, you bypass this expense with .delegate().

Since performance is a concern, don't take my word for it, test it yourself here:
http://jsperf.com/live-vs-delegate-test

Answer 4

Provided that no other elements may have this role, you can write the selector as

$( "[role=submit_action]").live(  "click", function() {});

However, I wouldn't, as it makes quite an expensive search before it binds the function. Use delegate instead:

$('body').delegate('[role=submit_action]','click',function() {});

This is functionally equivalent, except that it does not require an expensive DOM traversal before binding the handler.