Используя Jquery, как мне отправить форму, созданную с помощью AJAX?

Question

У меня есть форма из 2 частей.

1-я форма отправляется через $ .post и (если все идет правильно) заменяется на динамически сгенерированную форму из php.Идея заключается в том, что первая форма создает запись и количество связанных изображений для указанного элемента.Для загрузки указанных изображений создается новая форма.

Моя проблема в том, что моя вновь созданная форма не обрабатывается.Если отправить форму через старую функцию onClick = "", динамически сгенерированные поля файла будут игнорироваться.

Я довольно новичок в Jquery / AJAX, поэтому я могу делать это неправильно, но как я могу это сделать?заставить Jquery обратить внимание на мою 2-ю (динамически генерируемую) форму?

1-я форма:

<form name="addinv" id="addinv" action="admin_process.php" method="post">
          <fieldset>
            <legend>Add Inventory</legend>
            <input type="hidden" name="actiontotake" id="actiontotake" value="none" />
            <table width="400" border="0">
              <caption>
              Add Inventory Form Layout Table
              </caption>
              <tr>
                <td><strong>Price</strong></td>
                <td><input type="text" name="price" id="price" tabindex="1" /></td>
              </tr>
              <tr>
                <td><strong>Manufacturer</strong></td>
                <td><input type="text" name="mfg" id="mfg" tabindex="2" /></td>
              </tr>
              <tr>
                <td><strong>Model</strong></td>
                <td><input type="text" name="model" id="model" tabindex="3" /></td>
              </tr>
              <tr>
                <td><strong>Serial Number</strong></td>
                <td><input type="text" name="sn" id="sn" tabindex="4" /></td>
              </tr>
              <tr>
                <td><strong>Year</strong></td>
                <td><input type="text" name="year" id="year" tabindex="5" /></td>
              </tr>
              <tr>
                <td><strong>Size (Dimensions)</strong></td>
                <td><input type="text" name="dimensions" id="dimensions" tabindex="6" /></td>
              </tr>
              <tr>
                <td><strong>Bedrooms</strong></td>
                <td><input type="text" name="beds" id="beds" tabindex="7" /></td>
              </tr>
              <tr>
                <td><strong>Bathrooms</strong></td>
                <td><input type="text" name="baths" id="baths" tabindex="8" /></td>
              </tr>
              <tr>
                <td><strong>Range Type</strong></td>
                <td><input type="text" name="range" id="range" tabindex="9" /></td>
              </tr>
              <tr>
                <td><strong>Siding Type</strong></td>
                <td><input type="text" name="siding" id="siding" tabindex="10" /></td>
              </tr>
              <tr>
                <td><strong>Roof Type</strong></td>
                <td><input type="text" name="roof" id="roof" tabindex="11" /></td>
              </tr>
              <tr>
                <td><strong>Furnace Type</strong></td>
                <td><input type="text" name="furnace" id="furnace" tabindex="12" /></td>
              </tr>
              <tr>
                <td><strong>Features &amp; Benefits</strong></td>
                <td><textarea name="fandb" id="fandb" tabindex="13"></textarea></td>
              </tr>
              <tr>
                <td><strong>Number of Pictures</strong></td>
                <td><input type="text" name="picnum" id="dimensions" tabindex="14" /></td>
              </tr>
              <tr>
                <td colspan="2" align="center"><input name="addinventorybutton" id="addinventorybutton" type="submit" value="Add Home" tabindex="15"/></td>
              </tr>
            </table>
          </fieldset>
        </form>

Обработчик Jquery:

$(document).ready(
    function(){
        $("#addinventorybutton").click(
            function(){
               $("#actiontotake").val("Add Home");
               var dta = $("#addinv").serialize();
                           $.post("admin_process.php",dta,function(data){
                   $("div#form").html(data);
                           });
            return false;
        });
                    $("#addnewpicturesbutton").click(
            function(){
            $("#actiontotake").val("Add Picture");
            AddPic();
            return false;
        });
    });

2-я форма (через вызов PHP и AJAX):

<form name="addpictures" id="addpictures" enctype="multipart/form-data" method="post" action="admin_process.php">
        <fieldset><legend>Add Associated Images</legend>
        <?php 
            for($i=0;$i<$pics;$i++)
            {
                echo("<input type='file' name='pic".$i."' /><br />\n");
            }
            ?>
            <input type="hidden" name="actiontotake" id="actiontotake" value="none" />
            <input type="hidden" name="inventory_id" id="inventory_id" value="<?php echo $newid; ?>">
            <input type="button" name="addnewpicturesbutton" id="addnewpicturesbutton" value="Add Pictures to new home">
            </fieldset>
            </form>

Answer 1

Я не совсем уверен, но подозреваю, что второй формы не было при создании DOM. Если вы попробуете:

$('#formID').live('submit',
function() {
  // do whatever
}
);

Я думаю, что должно работать.

Answer 2

используйте .live () метод для отправки второй формы:

$('#addnewpicturesbutton').live('click', function() {
      $("#actiontotake").val("Add Picture");
      AddPic();
      return false;
});

.live () прикрепляет обработчик к событию для всех элементов, которые соответствуют текущий селектор, сейчас или в будущее.

Answer 3

Вам нужно освежить привязки формы после загрузки новой.Вызовите

$("#addnewpicturesbutton").click(
    function(){
        $("#actiontotake").val("Add Picture");
        AddPic();
        return false;

в обратном вызове для первой функции.