Question

I have five different input controls on a page, each with a different id and name, and a class as well.

<input id="txtName1" name="txtName1" class="jName" type="text" />
<br />
<input id="txtName2" name="txtName2" class="jName" type="text" />
<br />
<input id="txtName3" name="txtName3" class="jName" type="text" />
<br />
<input id="txtName4" name="txtName4" class="jName" type="text" />
<br />
<input id="txtName5" name="txtName5" class="jName" type="text" />

Which is the more efficient manner when using jquery to select a group of inputs by to register the blur event? The reason I ask is because I actually have 20 of these input controls on the page and I want the jquery select to be as quick as possible.

1) Select by tag id:

$(document).on("blur", "input[id*='_txtName']", function ($e) {
  alert("blur event successful");
})

or

2) Select by class:

$(document).on("blur", ".jName", function ($e) {
  alert("blur event successful");
})

EDIT:
My intent here is to hook the blur event up to all of the input elements in the code above. Sorry for the confusion here, folks.

Answer 1

Couple things:

1. You are using the same id value on all those elements. Don’t do that, they’re supposed to be unique.
2. Looking up by class is much faster in this case, since a class selector is faster than an attribute selector.

Performance test: http://jsperf.com/id-regex-vs-class

In the HTML on that test, I did change your id values to be unique. I’m also using the attribute starts with selector instead of the ends with.