Integrate POST method into dynamically created form

Question

I'm creating a GUI with a form to insert an object into a div then apply classes to it that will animate it across the screen. However with the way I have it set up, whenever I select the class and apply it and hit the submit button, it seems to be refreshing the whole page. I know it has something to do with using a POST method but I'm not sure how. Here is my 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{
        }
    //}
    });     

And here is a JS fiddle: http://jsfiddle.net/2vazw/

Any help would be greatly appreciated

Answer 1

I have changed your code a little bit to do things more efficiently.

First, I used event delegation, which means there is no need to add any more listeners during execution. The event propagates until it reaches the form and then the clicked button is identified and the event is handled.

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

I then get the selected animation and index and from there you can do whatever you want.

The form is separated from the rest of the page elements, and there is only one form, not one form per sprite.

On a side note, if I were to do it myself, I would separate the logical representation of the 'back-end' (i.e, the code that drives the animator) from the UI accompanying it by creating an Animator class that can be instantiated and creates the entire interface from scratch and is reusable and self-contained.

See the example here.