Is it possible to "refresh" or "rerun" a jQuery selector after the DOM might have changed? -


i have page loads complicated set of forms. in set of forms, there password fields. these password fields have show/hide toggle switches which, when of them clicked, password fields replaced equivalents of in dom types toggled between "text" , "password" facilitate show/hide effect. clear, original input replacewith()'ed brand new input same attributes, including id, different type attributes.

the problem when toggle occurs, global handles had made in jquery selectors (such $('#password_field_id')) no longer map password fields.

is there jquery function can run on selector re select original css selector current dom?

the function replaces inputs follows:

function togglepasswordhide() {     var show = false;     if ($('#basic_pass_24').attr('type') == 'password')     {         show = true;     }      $('input.password_input').each(function()     {         var sdisabled = '';         if ($(this).is(':disabled'))         {             sdisabled = 'disabled="disabled"';         }          if ( show ) // show password         {             $(this).replacewith('<input type="text" '+sdisabled+' class="password_input" id="'+$(this).attr('id')+'" value="'+$(this).val()+'">');             show_password.text('hide');         }         else // hide password         {             $(this).replacewith('<input type="password" '+sdisabled+' class="password_input" id="'+$(this).attr('id')+'" value="'+$(this).val()+'">');             show_password.text('show');         }     }); } 

...is there call can make during .each "reload" jquery object after replacement has been made global handles same relative inputs update rather having redeclare new jquery objects same selectors each element , overwrite original handles?

use event-delegation, , listen events on parent form:

$("form").on("click", ".password_input", function(event) {     /* when password input clicked */ }); 

because event bound form element, can add , remove inputs wish without having worry losing events.

when click, or perform other action, on 1 of password inputs, event bubbles form evaluated. if .target matches selector (in example, .password_input), callback function invoked , can react event took place.


Comments