Editing jQuery .live() vs .delegate() vs .on() This edit will create a new revision. Your details (optional) Name Email (won’t be displayed; might be used for Gravatar) URL Test case details Title * Published (uncheck if you want to fiddle around before making the page public) Description (in case you feel further explanation is needed)(Markdown syntax is allowed) Are you a spammer? (just answer the question) Preparation code Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <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> Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script> Define setup for all tests (variables, functions, arrays or other objects that will be used in the tests) (runs before each clocked test loop, outside of the timed code region) (e.g. define local test variables, reset global variables, clear canvas, etc.) (see FAQ) Define teardown for all tests (runs after each clocked test loop, outside of the timed code region) (see FAQ) Code snippets to compare Test 1 Title Async (check if this is an asynchronous test) Code $('p').live('click', $.noop); Test 2 Title Async (check if this is an asynchronous test) Code $("#ns_Z7_PCVU1K940GOBD0I1MSLEEU0084_patientsearch").delegate('.field-container', 'blur', $.noop); Test 3 Title Async (check if this is an asynchronous test) Code $("body").delegate('.field-container', 'blur', $.noop); Test 4 Title Async (check if this is an asynchronous test) Code $(document).delegate('.field-container', 'blur', $.noop); Test 5 Title Async (check if this is an asynchronous test) Code $('body').on('blur', '.field-container', $.noop)