Интеграция метода POST в динамически создаваемую форму

Я создаю графический интерфейс с формой для вставки объекта в 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($("", {"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><option>", { value:"Pulse"})
 .append("Pulse")
 )
 .append($("</option><option>", { value:"Star"})
 .append("Star")
 )
 .append($("</option><option>", { value:"Square"})
 .append("Square")
 )
 )
 .append($("", { "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/  Любая помощь будет принята с благодарностью </option></select></form></div></div>
1 ответ

Я немного изменил код, чтобы сделать что-то более эффективно.

Во-первых, я использовал делегирование событий, а это означает, что во время исполнения нет необходимости добавлять больше слушателей. Событие распространяется до тех пор, пока оно не достигнет формы, а затем щелкнула кнопку, и событие будет обработано.

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

Затем я получаю выбранную анимацию и индекс, и оттуда вы можете делать все, что хотите.

Форма отделена от остальных элементов страницы, и есть только одна форма, а не одна форма для sprite.

На стороне примечания, если бы я сам делал это, я бы разделил логическое представление "back-end" (то есть код, который управляет аниматором) из интерфейса, сопровождающего его, создав класс Animator, который может быть создан и создает весь интерфейс с нуля, он многоразовый и автономный.

См. Пример здесь.

licensed under cc by-sa 3.0 with attribution.