Have Geek Brain

JQuery monitoring form field created with AJAX request

Foreword: I'm sure this is incredibly simple, but I've searched this site and jQuery site and can't find the right search term to get the answer - please excuse my ignorance!

I am adding additional form fields using jQuery's ajax function and need to apply additional ajax functions to those fields, but cannot seem to get jQuery to control these fields on the fly.

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 it is present in the main html page, the function works, but if it comes in via the $ .load function, it is not - apparently because $ (document) .ready has already started.

I tried:

$(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 work ...

+2


a source to share


2 answers


I think you are close. You need to add a keyboard handler after the .load call completes. Try to change this ...

  $('#form').load('loader.php?val=' + t);
  prepUid();


For this...

  $('#form').load('loader.php?val=' + t, null, prepUid);
+2


a source


What you are looking for is the jquery live function.

Attach a handler to the event for all elements that match the current selector, now or in the future

You can do something like this:

$('.clickme').live('click', function() {// Live handler called.});


and then add something using the DOM

$('body').append('<div class="clickme">Another target</div>');

When you click the div added above it will invoke the click handler as you expect with the dom nodes loaded statically.

You can read more here: http://api.jquery.com/live/

+2


a source






More articles:


All Articles