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

Revision 16 of this benchmark created by Luis Lobo Borobia on


Preparation HTML

<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">&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
.on() on body
$('body').on('blur', '.field-container', $.noop)
ready
.on() on document
$(document).on('blur', '.field-container', $.noop)
ready

Revisions

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