jQuery monitoring form field created by AJAX query

Posted by Jon Rhoades on Stack Overflow See other posts from Stack Overflow or by Jon Rhoades
Published on 2010-04-21T00:17:10Z Indexed on 2010/04/21 0:23 UTC
Read the original article Hit count: 692

Filed under:
|
|

Preface: I am sure this is incredibly simple, but I have searched this site & the jQuery site and can't figure out the right search term to get an answer - please excuse my ignorance!

I am adding additional form fields using jQuery's ajax function and need to then apply additional ajax functions to those fields but can't seem to get jQuery to monitor these on the fly form fields.

How can I get jQuery to use these new fields?

$(document).ready(function() {
   $('#formField').hide();
   $('.lnk').click(function() {
      var t = this.id;
      $('#formField').show(400);
      $('#form').load('loader.php?val=' + t);
   });

      //This works fine if the field is already present
      var name  = $('#name');
      var email = $('#email');
      $('#uid').keyup(function () {
         var t = this; 
         if (this.value != this.lastValue) {
            if (this.timer) clearTimeout(this.timer);             
            this.timer = setTimeout(function () {
               $.ajax({
                  url: 'loader.php',
                  data: 'action=getUser&uid=' + t.value,         
                  type: 'get',
                  success: function (j) {
                     va = j.split("|");
                     displayname  = va[1];
                     mail         = va[2];
                     name.val(displayname);
                     email.val(mail);
                  }
               });
            }, 200);  
            this.lastValue = this.value;
         }
      });
}); 

So if the is present in the basic html page the function works, but if it arrives by the $.load function it doesn't - presumably because $(document).ready has already started.

I did try:

$(document).ready(function() {
   $('#formField').hide();
   $('.lnk').click(function() {
      var t = this.id;
      $('#formField').show(400);
      $('#form').load('loader.php?val=' + t);
      prepUid();
   });
});

function prepUid(){
      var name  = $('#name');
      var email = $('#email');
     $('#uid').keyup(function () {
snip...........

But it didn't seem to work...

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ajax