Javascript 将POST方法集成到动态创建的表单中

我正在创建一个GUI，其中包含一个表单，用于将对象插入到div中，然后对其应用类，从而在屏幕上为其设置动画。然而，按照我的设置方式，每当我选择类并应用它并点击submit按钮时，它似乎正在刷新整个页面。我知道这与使用POST方法有关，但我不确定如何使用。这是我的JS：

////////////////////////////////////////////////////////////////////////////////////////////////////////ADD A SPRITE
var spriteId = 1;
$(".add_sprite").click(function() {
    $("<div />", { "class":"sprite_container", id:"sprite_container"+spriteId })
    .append($("<div />", { "class":"sprite" , id:"sprite"+spriteId }))
    .appendTo("#divMain");
    spriteId++;
});

////////////////////////////////////////////////////////////////////////////////////////////////////////ADD SPRITE CONTROLS
var controlsId = 1;
$(".add_sprite").click(function() {
    $("<form />", { "class":"sprite_controls", id:"sprite_controls"+controlsId })

    //Sprite Name
    .append($("<input />", {"class":"sprite_name", type: "text", value: "Name It", id:"name"+controlsId }))

    //Sprite Animation A
    .append($("<select/>", { "class":"sprite_animationA", id:"animationA"+controlsId })
        .append($("<option />", { value:"Animate It"})
            .append("Animate It")
        )
        .append($("<option />", { value:"Pulse"})
            .append("Pulse")
        )
        .append($("<option />", { value:"Star"})
            .append("Star")
        )
        .append($("<option />", { value:"Square"})
            .append("Square")
        )
    )
    .append($("<button/>", { "class":"run_it", id:"run_it"+controlsId })
        .append("Run It")   
    )
    .appendTo("#controls");
    controlsId++;
});

////////////////////////////////////////////////////////////////////////////////////////////////////////APPLY ANIMATIONS TO SPRITE 1

//$('#sprite_controls1').submit(applyAnimA1);
//$('#run_it1').off().click(function() {$('#sprite_controls1').submit();});
//  function applyAnimA1() {
$('#run_it1').click(function (e) {
        var animA1 = $('#animationA1');
        e.preventDefault();
        if (animA1.val() == 'Pulse'){

            $("#sprite_container1").addClass("pulse");


        }
        else if (animA1.val() == 'Star'){

            $("#sprite_container1").addClass("star");

        }
        else if (animA1.val() == 'Square'){

            $("#sprite_container1").addClass("square");


        }

        else{
        }
    //}
    });     

//////////////////////////////////////////////////////////////////////
var-spriteId=1；
$（“.add_sprite”）。单击（函数（）{
$（“”，{“类”：“sprite_容器”，id:“sprite_容器”+spriteId}）
.append（$（“”，{“类”：“sprite”，id:“sprite”+spriteId}））
.附于（“#divMain”）；
spriteId++；
});
////////////////////////////////////////////////////////////////////////////////////////////////////////添加精灵控件
var-controlsId=1；
$（“.add_sprite”）。单击（函数（）{
$（“”，{“类”：“精灵控制”，id:“精灵控制”+controlsId}）
//精灵名
.append（$（“”，{“class”：“sprite_name”，键入：“text”，值：“name It”，id:“name”+controlsId}））
//精灵动画
.append（$（“”，{“类”：“sprite_animationA”，id:“animationA”+controlsId}）
.append（$（“”，{value:“设置动画”}）
.append（“设置动画”）
)
.append（$（“”，{value:“Pulse”}）
.append（“Pulse”）
)
.append（$（“”，{value:'Star}）
.append（“星”）
)
.append（$（“”，{value:“Square”}）
.附加（“方形”）
)
)
.append（$（“”，{“类”：“运行它”，id:“运行它”+controlsId}）
.append（“运行它”）
)
.附于（“#控制”）；
controlsId++；
});
////////////////////////////////////////////////////////////////////////////////////////////////////////将动画应用于精灵1
//$（'sprite_controls1'）。提交（applyAnimA1）；
//$（'run#it1'）.off（）。单击（函数（）{$（'sprite_controls1'）。提交（）；}）；
//函数applyAnimA1（）{
$（'run#it1'）。单击（函数（e）{
变量animA1=$（'#animationA1'）；
e、 预防默认值（）；
如果（animA1.val（）=='Pulse'）{
$（“精灵容器1”）.addClass（“脉冲”）；
}
else if（animA1.val（）=='Star'）{
$（“#sprite_container1”）.addClass（“star”）；
}
else if（animA1.val（）=='Square'）{
$（“#sprite_container1”）.addClass（“square”）；
}
否则{
}
//}
});     

这是一把JS小提琴：

---

任何帮助都将不胜感激

我对您的代码做了一些修改，以提高工作效率

首先，我使用了事件委托，这意味着在执行过程中不需要再添加任何侦听器。事件会一直传播，直到到达表单，然后标识单击的按钮并处理事件

$('#formContainer').delegate('button','click',function (e) {
...

然后我得到选定的动画和索引，从那里你可以做任何你想做的事情

表单与其他页面元素分开，并且只有一个表单，而不是每个

sprite

都有一个表单

另一方面，如果我自己做的话，我会通过创建一个animator类，将“后端”（即驱动动画师的代码）的逻辑表示从伴随它的UI中分离出来，该类可以实例化，从头开始创建整个界面，并且是可重用和自包含的

---

参见示例。

谢谢，这很有效。在表格提交中使用活动代表团是我遗漏的，不客气。顺便说一句，表单没有提交，在这种情况下只需单击即可。委派是一种功能强大、性能增强的技术，目前尚不清楚。