jQuery .live() vs .delegate() vs .on()
JavaScript performance comparison
Preparation code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="root-container">
<!--Header Starts-->
<div id="header">
<div id="skip-nav">
<div class="section-header">
<h2>
Skip To
</h2>
</div>
<ul>
<li>
<a href="#utility-section">utility</a>
</li>
<li>
<a href="#primary-nav">primary nav</a>
</li>
<li>
<a href="#left-rail">account summary</a>
</li>
<li>
<a href="#content-rail">main content</a>
</li>
<li>
<a href="#right-rail">related content</a>
</li>
<li>
<a href="#footer">footer</a>
</li>
</ul>
</div>
<!--Utility Section Starts-->
<div id="utility-section">
<!--Utility Starts-->
<div class="utility">
<div class="section-header">
<h2>
Utility
</h2>
</div>
<ul>
<li class="welcome-msg">
Welcome Brianna
</li>
<li class="selected">
<a href="#">Secure Inbox</a>
</li>
<li>
<a href="#">Settings</a>
</li>
<li>
<a href="#">Logout</a>
</li>
<!--Search Starts-->
<li class="no-pipe search">
<input type="text" id="search" name="search" value="Search myCIGNA.com" size="30"
/>
<button>
Search
</button>
</li>
<!--Search Ends-->
</ul>
</div>
<!--Utility Ends-->
</div>
<!--Utility Section Ends-->
</div>
<!--Header Ends-->
<!--Global Menu Starts-->
<div class="section-header">
<h2>
Primary Navigation
</h2>
</div>
<div id="primary-nav">
<ul class="primary-navContainer">
<li class="logo-cigna">
<a href="#" class="logo-cigna first"><img title="Cigna Logo" alt="Cigna Logo" src="images/logo_Cigna.gif" /></a>
</li>
<li class="first-item">
<a href="#" class="dashboard">Dashboard</a>
<div class="hover-nav">
<div class="shadow">
</div>
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Dolor sit</a>
</li>
<li class="last">
<a href="#">Amet idipiscing</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="patients">Patients</a>
<div class="hover-nav">
<div class="shadow">
</div>
<ul>
<li>
<a href="#">Search Patients</a>
<ul class="nav-lvl-two">
<li>
Verify Eligibility
</li>
<li>
Estimate Patient Liability
</li>
</ul>
</li>
<li>
<a href="#" class="link-thirdParty">View & Submit Precertifications</a>
</li>
<li class="last">
<a href="#">Amet idipiscing</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="claims">Claims</a>
</li>
<li>
<a href="#" class="payments">Payments</a>
<div class="hover-nav">
<div class="shadow">
</div>
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Dolor sit</a>
</li>
<li class="last">
<a href="#">Amet idipiscing</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mypractice">My Practice</a>
</li>
<li class="no-pipe">
<a href="#" class="resources last">Resources</a>
<div class="hover-nav">
<div class="shadow">
</div>
<ul>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Dolor sit</a>
</li>
<li class="last">
<a href="#">Amet idipiscing</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!--Global Menu Ends-->
<div class="tab-divider">
</div>
<div class="shadow">
</div>
<div id="tab-prev">
<a href="#" class="prev"> </a>
</div>
<div id="tabs">
<div class="tab-wrapper">
<ul>
<li class="scrollable">
<ul class="items">
<li class="current">
<a href="#" class="tab-title">Patient Search</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="tab-next">
<a href="#" class="next"> </a>
</div>
<div id="tab-dropdown">
<a href="#" class="dropdown">Tabs</a>
<div class="hover-nav">
<ul>
<li>
<a href="#">Dashboard</a>
</li>
</ul>
</div>
</div>
<!--Columns Layout Starts-->
<div id="main-contentWrapper">
<!--Breadcrumb Starts-->
<!--Breadcrumb Ends-->
<div id="panes">
<!-- Pane1 -->
<div class="pane one-colLayout">
<div class="content-rail">
<h2>
<a name="top"></a>
Patient Search
</h2>
<div class="sub-section">
<span class="help">
<a class="trigger-popup-iframe-large" href="/secure/content/html/help/patientEligibilityDetailsSearch/patientSearch.html"></a>
</span>
<p class="margin-bottom20">
<span class="bold">
Instructions:
</span>
You may search past, present or future eligibility for up to 10 members.
</p>
<p class="margin-bottom10">
Not all fields are required. For each member, you can enter any of the following
combinations
<span class="bold">
A)
</span>
Patient ID and Patient Date of Birth,
<span class="bold">
B)
</span>
Patient ID,
<br />
Patient Last Name and Patient First Name,
<span class="bold">
C)
</span>
Patient Date of Birth, Patient Last Name and Patient First Name
</p>
</div>
<form id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_patientsearch" class="oep-managed-form oep-managed-form-new portal-validation {enterButton: 'button.btn-submit-form-patient-search'}"
action="/web/secure/chcp/windowmanager/patientsearch/!ut/p/b1/hc5NUoNAEAXgs-QE3YM9ZliCIYS_QIkgzIYimsKJDGMpoub0gnuT3nXV9143SKgZ2ZxzuiGECuTQTqprR2WGtl92edv4glu-S8wXUUAYsDSMnHJroVgC9QWAeC0fgux6c5hPPYK8iJeuP4D_jIPXGizY74w-Qj2zdZPdlQWLbEJ_H6xnRvk2iRxExqGa1PELysG86_mzB6iQmvyEb0n8MSRnO83O3inJRR9unsT0o-gz977TTWHG2MMxHnfZc3lfuI5r6VQfQMtevKrspetWq1-VXkM4/dl4/d5/L0lDU0lKSmdrS0NsRUpDZ3BSQ2dwUkNTQS9ZSVVJQUFJSUlJTU1JS0VFQUFDR09HT0NHSUJKRkpGQkpORE5EQk5ISUVBTExBISEvNEczYUQyZ2p2eWhDa3lGTU5RaWt5RktOUkZrS2ZxakdRb2dnL1o3X1BDVlUxSzk0MEdPQkQwSTFNU0xFRVUwMDg0L2xqOFg2NDM0MDAwMDUvaWJtLmludi8xOTIzOTQ2MzE2NjYvaXNSZXN1bHRQYWdlL2hhbmRsZUJ1aWxkUGFnZVJlcXVlc3Q!/"
method="POST" target="_self">
<div class="filter-form clear-both">
<label for="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_-asOfDate">
Eligibility as of:
</label>
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_-asOfDate" name="asOfDate" readonly="readonly"
type="text" value="03/07/2012" class="hasDatepicker">
<button class="datepicker">
</button>
</div>
<fieldset>
<div class="patient-search patient-search-form">
<div>
<!-- BEGIN Patient ID -->
<div class="float-left width24">
<p>
<span class="float-left ">
<span>
</span>
</span>
</p>
</div>
<div class="float-left margin-right15 width186">
<label for="patientid">
Member ID
</label>
</div>
<!-- END Patient ID -->
<div class="float-left width186">
<label for="selectDOB">
Date of Birth
</label>
</div>
<!-- BEGIN LAST NAME -->
<div class="float-left width186 margin-right15">
<label for="lname">
Subscriber Last Name
</label>
</div>
<!-- END LAST NAME -->
<!-- BEGIN FIRST NAME -->
<div class="float-left">
<label for="fname">
First Name
</label>
</div>
<!-- END FIRST NAME -->
<div class="clear-both">
</div>
</div>
<div class="patient-info patient-info-field search_valid">
<!-- BEGIN Patient ID -->
<div class="float-left field-container width24">
<p>
<span class="float-left row-submit-msg">
<span>
</span>
</span>
</p>
</div>
<div class="float-left field-container valid-patient-id margin-right15 optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_patientId" name="memberData[0].patientId"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
The Member ID is incorrect. The Member ID number has 7, 8, 9 or 11 characters. Please
note: some ID numbers begin with the letter "U" and are followed by the number "0".
</span>
</p>
</div>
<!-- END Patient ID -->
<!-- BEGIN DATE OF BIRTH -->
<div class="float-left field-container valid-dob optional">
<span class="set">
<div class="input-container">
<input class="hasdatePicker" />
<button class="datepicker">
</button>
</div>
<p class="field-msg failed">
<span>
Please select a day, month and year from the dropdown menus.
</span>
</p>
</span>
</div>
<!-- END DATE OF BIRTH -->
<!-- BEGIN LAST NAME -->
<div class="float-left field-container margin-right15 valid-lname optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_subLastName" name="memberData[0].subLastName"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
Invalid last name. Please use only letters and (if needed) single hyphens, periods,
apostrophes and spaces
</span>
</p>
</div>
<!-- END LAST NAME -->
<!-- BEGIN FIRST NAME -->
<div class="float-left field-container margin-right15 valid-fname optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_subFirstName" name="memberData[0].subFirstName"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
Invalid first name. Please use only letters and (if needed) single hyphens, periods,
apostrophes and spaces
</span>
</p>
</div>
<!-- END FIRST NAME -->
<a href="#" class="remove-patient">Remove</a>
<div class="clear-both">
</div>
</div>
<div class="patient-info patient-info-field">
<!-- BEGIN Patient ID -->
<div class="float-left field-container width24">
<p>
<span class="float-left row-submit-msg">
<span>
</span>
</span>
</p>
</div>
<div class="float-left field-container valid-patient-id margin-right15 optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_patientId" name="memberData[0].patientId"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
The Member ID is incorrect. The Member ID number has 7, 8, 9 or 11 characters. Please
note: some ID numbers begin with the letter "U" and are followed by the number "0".
</span>
</p>
</div>
<!-- END Patient ID -->
<!-- BEGIN DATE OF BIRTH -->
<div class="float-left field-container valid-dob optional">
<span class="set">
<div class="input-container">
<input class="hasdatePicker" />
<button class="datepicker">
</button>
</div>
<p class="field-msg failed">
<span>
Please select a day, month and year from the dropdown menus.
</span>
</p>
</span>
</div>
<!-- END DATE OF BIRTH -->
<!-- BEGIN LAST NAME -->
<div class="float-left field-container margin-right15 valid-lname optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_subLastName" name="memberData[0].subLastName"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
Invalid last name. Please use only letters and (if needed) single hyphens, periods,
apostrophes and spaces
</span>
</p>
</div>
<!-- END LAST NAME -->
<!-- BEGIN FIRST NAME -->
<div class="float-left field-container margin-right15 valid-fname optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_subFirstName" name="memberData[0].subFirstName"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
Invalid first name. Please use only letters and (if needed) single hyphens, periods,
apostrophes and spaces
</span>
</p>
</div>
<!-- END FIRST NAME -->
<a href="#" class="remove-patient">Remove</a>
<div class="clear-both">
</div>
</div>
<div class="patient-info patient-info-field">
<!-- BEGIN Patient ID -->
<div class="float-left field-container width24">
<p>
<span class="float-left row-submit-msg">
<span>
</span>
</span>
</p>
</div>
<div class="float-left field-container valid-patient-id margin-right15 optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_patientId" name="memberData[0].patientId"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
The Member ID is incorrect. The Member ID number has 7, 8, 9 or 11 characters. Please
note: some ID numbers begin with the letter "U" and are followed by the number "0".
</span>
</p>
</div>
<!-- END Patient ID -->
<!-- BEGIN DATE OF BIRTH -->
<div class="float-left field-container valid-dob optional">
<span class="set">
<div class="input-container">
<input class="hasdatePicker" />
<button class="datepicker">
</button>
</div>
<p class="field-msg failed">
<span>
Please select a day, month and year from the dropdown menus.
</span>
</p>
</span>
</div>
<!-- END DATE OF BIRTH -->
<!-- BEGIN LAST NAME -->
<div class="float-left field-container margin-right15 valid-lname optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_subLastName" name="memberData[0].subLastName"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
Invalid last name. Please use only letters and (if needed) single hyphens, periods,
apostrophes and spaces
</span>
</p>
</div>
<!-- END LAST NAME -->
<!-- BEGIN FIRST NAME -->
<div class="float-left field-container margin-right15 valid-fname optional">
<div class="input-container">
<input id="ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_memberData0_subFirstName" name="memberData[0].subFirstName"
class="input180" type="text" value="">
</div>
<p class="field-msg failed">
<span>
Invalid first name. Please use only letters and (if needed) single hyphens, periods,
apostrophes and spaces
</span>
</p>
</div>
<!-- END FIRST NAME -->
<a href="#" class="remove-patient">Remove</a>
<div class="clear-both">
</div>
</div>
</div>
<button type="button" class="add-new-patient button-grey">
Add New Patient
</button>
</fieldset>
<button class="margin-right18 btn-submit-form-patient-search btn-spinner" type="button">
Search
</button>
<span class="spinner-inline-small" style="display: none">
searching...
</span>
<span id="btn-submit-msg" class="field-msg failed btn-submit-msg">
<span>
Please enter in a valid combination. Please refer to the instructions or help for
more information.
</span>
</span>
<span id="server-msg" class="field-msg failed server-msg">
<span>
Please enter in the required information.
</span>
</span>
<span id="err-exist-msg" class="field-msg failed err-exist-msg">
<span>
Please correct the errors before submitting.
</span>
</span>
<input type="submit" class="hidden-form" style="display:none">
</form>
</div>
</div>
</div>
<!--Column Layout Ends-->
<!--Footer Starts-->
<div id="footer">
<div class="section-header">
<h2>
Footer Navigation
</h2>
</div>
<a href="#" class="logo-cigna"><img title="Cigna Logo" alt="Cigna Logo" src="images/logo_Cigna.gif" /></a>
<ul class="footer-links">
<li>
<a href="#">Site Tour</a>
</li>
<li>
<a href="#">Contact CIGNA</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">Legal Disclaimer</a>
</li>
<li>
<a href="#">Site Help</a>
</li>
<li>
<a href="#">Sitemap</a>
</li>
<li class="no-pipe">
<a href="#">Feedback [+]</a>
</li>
<li style="list-style: none">
<br />
</li>
<li class="no-pipe">
2011 CIGNA. All rights reserved.
</li>
</ul>
<div class="footer-logo">
<a href="#" class="inform-reform-logo"><img src="css/images/logo_informedOnReform.gif" alt="informed on reform" title="informed on reform" /></a>
<a href="#" class="cybertrust-logo"><img src="images/logo_VerizonCybertrust.gif" alt="Verizon Trust Logo" title="Verizon Trust Logo" /></a>
</div>
</div>
<!--Footer Ends-->
</div>Preparation code output
Utility
- Welcome Brianna
- Secure Inbox
- Settings
- Logout
Primary Navigation
Patient Search
Instructions: You may search past, present or future eligibility for up to 10 members.
Not all fields are required. For each member, you can enter any of the following
combinations
A)
Patient ID and Patient Date of Birth,
B)
Patient ID,
Patient Last Name and Patient First Name,
C)
Patient Date of Birth, Patient Last Name and Patient First Name
Footer Navigation
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
.live() |
|
pending… |
.live() with context |
|
pending… |
.delegate() |
|
pending… |
.delegate() on document |
|
pending… |
.on() on body |
|
pending… |
.on() on document |
|
pending… |
Compare results of other browsers
Revisions
You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:
- Revision 1: published by PeeHaa
- Revision 2: published
- Revision 4: published by maru
- Revision 5: published by Andrew Smith
- Revision 6: published
- Revision 7: published
- Revision 8: published
- Revision 9: published
- Revision 10: published
- Revision 11: published
- Revision 12: published by Jonathan
- Revision 13: published
- Revision 14: published
- Revision 15: published
- Revision 16: published by Luis Lobo Borobia
- Revision 17: published
- Revision 18: published by Mohammad Salehe
- Revision 19: published by nicolas
- Revision 20: published by nicolas
- Revision 21: published by nicolas
- Revision 22: published by nicolas
- Revision 23: published
- Revision 25: published
- Revision 26: published by pcmanik
- Revision 28: published by German
- Revision 29: published by Jonas Grimfelt
- Revision 30: published by tyareg
- Revision 31: published by remrem
- Revision 32: published
- Revision 33: published
- Revision 34: published
- Revision 35: published by 2123959
- Revision 37: published by Bruno Bernardino
- Revision 38: published
- Revision 39: published
- Revision 41: published
- Revision 42: published
- Revision 43: published by Yogendra Gautam
- Revision 44: published by Hamed Al-Khabaz
- Revision 46: published by Colin McLeod
- Revision 47: published
- Revision 48: published
- Revision 49: published
- Revision 51: published
- Revision 52: published
- Revision 53: published by Jan Klat
0 comments