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

JavaScript performance comparison

Revision 14 of this test case created

Preparation code

<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>

Preparation code output

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

Please enter in a valid combination. Please refer to the instructions or help for more information. Please enter in the required information. Please correct the errors before submitting.

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
.live()
$('p').live('click', $.noop);
pending…
.live() with context
$("#ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_patientsearch").delegate('.field-container', 'blur', $.noop);
pending…
.delegate()
$("body").delegate('.field-container', 'blur', $.noop);
pending…
.delegate() on document
$(document).delegate('.field-container', 'blur', $.noop);
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:

0 comments

Add a comment