jQuery .live() vs .delegate() vs .on() (v14)

Revision 14 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/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">&nbsp;</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">&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

Test runner

Ready to run.

Testing in
TestOps/sec
.live()
$('p').live('click', $.noop);
ready
.live() with context
$("#ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_patientsearch").delegate('.field-container', 'blur', $.noop);
ready
.delegate()
$("body").delegate('.field-container', 'blur', $.noop);
ready
.delegate() on document
$(document).delegate('.field-container', 'blur', $.noop);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.