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

Integrate POST method into dynamically created form

本文关键字：创建 表单 动态 POST 方法 集成      更新时间：2023-09-26

我正在创建一个GUI，其中包含一个将对象插入div的窗体，然后将类应用到它，从而在屏幕上为它设置动画。然而，按照我的设置方式，每当我选择类并应用它并点击提交按钮时，它似乎会刷新整个页面。我知道这与使用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{
        }
    //}
    });

这里有一个JS小提琴：http://jsfiddle.net/2vazw/

如有任何帮助，将不胜感激

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

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

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

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

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

顺便说一句，如果我自己做，我会通过创建一个animator类来将"后端"（即驱动动画师的代码）的逻辑表示与附带的UI分离，该类可以实例化并从头开始创建整个界面，并且是可重用和自包含的。

请参阅此处的示例。

相关文章：