Отправка формы с помощью jQuery

Question

Я начну с того, что я новичок в jQuery, но я действительно наслаждаюсь этим. Я также новичок в stackoverflow и действительно люблю его!

Проблема: Я создал подформу с помощью jQuery, чтобы пользователь мог добавить ее, а затем выбрать эту информацию в раскрывающемся списке, если она еще не доступна. Я не могу POST эти данные с помощью .ajax (), так что пользователь может продолжать заполнять другую информацию в главной форме без необходимости начинать заново.

Sub-Форма:

   $(function() {
      $("#add").live('click', function(event) {
      $(this).addClass("selected").parent().append('<div class="messagepop"><p id="close"><img src="img/close.png"></p></img><form id="addgroup" method="POST" action="add_group.php"><p><label for="group">New Group Description:</label><input type="text" size="30" name="grouping" id="grouping" /></p><p><label for="asset_type">Asset Type:</label><select name="asset" id="asset" ><option>Building</option><option>Equipment</option></select></p><p><input type="submit" value="Add Group" name="group_submit" class="group_submit"/></form><div id="result"></div></div>');
      $(".messagepop").show()
      $("#group").focus();
      return false;
  });

  $("#close").live('click', function() {
   $(".messagepop").hide();
   $("#add").removeClass("selected");
   return false;
  });
 });

А вот где я пытаюсь это обработать:

$(function () {
$('#addgroup').submit(function() {
  $.ajax({
   type: $(this).attr('method'),
   url: $(this).attr('action'),
   data: $(this).serialize(),
   success: function(responseText) {
    $('#result').html(responseText);
    }
   });
    return false;
 });
});

Я даже пытался создать простое предупреждение вместо обработки информации, и это также не работает. Вместо этого форма соответствует и обновляет страницу как обычно. Может ли кто-нибудь помочь мне понять, что я пропускаю или делаю неправильно? Спасибо!

Новая попытка:

$("#add").live('click', function(event) {
   var form = $("<form>").html("<input type='submit' value='Submit'/>").submit(function(){
   $.post("add_group.php", {grouping: "Building, asset: "STUFF"});
   $(".newgroup").append(form);
   return false;
});

Финальный код

$(function() {
    var id = 1
    $("#add").live('click', function(event){
        if($(".addgroup,").length == 0){
            $("#test").append('<div class="addgroup"><label for="newGroup">New Group:</label><input type="text" class="newgroup" id="' + ++id + '" /><input type="submit" value="Add Group" name="group_submit" class="group_submit"/></div>');
            $("#add").attr("src","img/add_close.png");
        }else{
            $("#add").attr("src","img/add.png");
            $(".addgroup").remove();}
        return false;
    });

});

$(function(){
    $(".group_submit").live('click',function(event){
        $.ajax({
            type: "POST",
            url: "add_group.php",
            data: {new_group: $(".newgroup").val(), asset: $("#group option:selected").text()},
            success: function(){}
        });
        $(".addgroup").remove();
        $('#subgroup').load('group.php', {'asset': $("#group option:selected").text()});
        return false;
    });
});

Answer 1

попробуйте использовать .live()

$(function () {
 $('#addgroup').live('submit',function() {
  $.ajax({
   type: $(this).attr('method'),
   url: $(this).attr('action'),
   data: $(this).serialize(),
   success: function(responseText) {
    $('#result').html(responseText);
    }
   });
    return false;
 });
});

и убедитесь, что addgroup не имеет дубликатов id ... вы можете использовать его как class, если его необходимо дублировать ...

Answer 2

Если форма отправляется и обновляется как обычно, jquery не запускается (обновление означает, что она отправляет форму в обычном режиме).

Я по какой-то причине (может быть, другие не нашли), что $ (document) .ready (function () {работает намного лучше, чем $ (function () {...

)

Кроме того, добавляемые вами группы должны иметь определенный идентификатор: нажмите #add, подсчитайте счетчик (form ++) и добавьте его к идентификатору (# addGroup_ + form), а затем сразу же наведите указатель на функцию, которая его добавила:

 $("#group").focus();
 $("#addGroup_"+form).submit(function() {