jQuery Überwachung Formularfeld durch AJAX-Abfrage erstellt

Question

Vorwort: Ich bin sicher, dies ist unglaublich einfach, aber ich habe diese Website und die jQuery-Website durchsucht und kann nicht herausfinden, den richtigen Suchbegriff, um eine Antwort zu bekommen - bitte entschuldigen Sie meine Unwissenheit!

Ich füge zusätzliche Formularfelder mit der Ajax-Funktion von jQuery hinzu und muss dann zusätzliche Ajax-Funktionen auf diese Felder anwenden, aber ich kann jQuery nicht dazu bringen, diese "on the fly" Formularfelder zu überwachen.

Wie kann ich jQuery dazu bringen, diese neuen Felder zu verwenden?

$(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;
         }
      });
}); 

Wenn die in der grundlegenden Html-Seite vorhanden ist, funktioniert die Funktion, aber wenn sie durch die Funktion $.load kommt, funktioniert sie nicht - vermutlich weil $(document).ready bereits gestartet wurde.

Ich habe es versucht:

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

Aber es schien nicht zu funktionieren...

Answer 1

Ich glaube, Sie sind nah dran. Sie müssen Ihren Keyup-Handler hinzufügen, sobald der .load-Aufruf abgeschlossen ist. Versuchen Sie, dies zu ändern...

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

Zu diesem...

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

Answer 2

Was Sie suchen, ist die Jquery-Live-Funktion.

Anhängen eines Handlers an das Ereignis für alle Elemente, die dem aktuellen Selektor entsprechen, jetzt oder in Zukunft

Sie können so vorgehen:

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

und dann etwas mit Hilfe des DOM hinzufügen

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

Wenn Sie auf das oben hinzugefügte div klicken, wird der Click-Handler ausgelöst, wie Sie es bei statisch geladenen Dom-Knoten erwarten.

Weitere Informationen finden Sie hier: http://api.jquery.com/live/