Question

我首先要说我是jQuery的新手，但我真的非常喜欢它。我也是stackoverflow的新手，非常喜欢它！

问题： 我已经使用jQuery创建了一个子表单，以便用户可以添加，然后从下拉列表中选择此信息（如果它尚不可用）。我无法使用.ajax（）发布此数据，因此用户可以继续填写主表单上的其他信息，而无需重新开始。

子形式：

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

如果表单正常提交和刷新，则jquery没有启动（刷新意味着它正常发布表单）。

我出于某种原因（也许其他人没有）发现$（document）.ready（function（）{比$（function（）{...

更好）

此外，您要添加的群组应具有明确的ID：在#add上单击，计算一个计数器（表单++）并将其添加到id（#addGroup_ +表单），然后在添加它的函数中直接将其作为目标：

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

Answer 2

尝试使用.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，您可以将其用作{{1}} ...

使用jQuery发布子表单

2 个答案: