jquery .live on form submit not picking up dynamically added inputs

Question

when my ajaxupload script finishes it adds a read-only input w/ the value of the image's URL.

it is a long script, but i think this is the relevant part that fires on successful completion:

var location = '<div id="'+ID+'_location" class="img_location">' + '<input name="'+ID+'" class="location regular-text" type="text" size="50" readonly="readonly" value="'+response+'" />';

$(container).append(location).show(); //create readonly input

$(container) is defined just as the parent div of the upload button. that part seems to work... the image is uploaded, it is saved properly, and the input w/ the image's location is added to to the DOM. but i've discovered a bug that if I click my SAVE button (which triggers my ajax save function) then this new input is NOT captured.

here is my save function:

  $('form#childoptions').live('submit', function(e) {

      e.preventDefault();

      var values = $(this).serialize();
      alert(values);


      var data = {
        action: 'save_function',
        type : 'save',
        _nonce: '<?php echo $nonce; ?>',
        formdata: values
    };
      $.post(ajaxurl, data, function(response) {
            //alert(response);
         if(response == 1) {
              show_message(1);
              t = setTimeout('fade_message()', 2000);
          } else {
              show_message(99);
              t = setTimeout('fade_message()', 2000);
          }
      });

      //return false;
  }); 

only the new input is not captured. the rest works properly. there is also no problem if i refresh in between as I presume the input is part of the DOM. which is why i thought to use .live. i thought i had solved the issue twice- 1. i wasn't using a "name" on the dynamic input and 2. i wasn't using .live on the form. but now i am doing both and not getting anywhere.

all help is much appreciated. let me know if there is more information I can provide.

Answer 1

It appears that your using live on the whole form, not on inputs. So the live event binding would try to pickup new forms with id childoptions. This won't work. You'd be better off using bind() instead. Have you tried:

$('form#childoptions').bind('submit', function(e) {…}

I'm curious if this will fix your issue.