將POST方法集成到動態創建的表單中

我正在創建一個帶有表單的GUI，以將對象插入到div中，然後將類應用到它，以便在屏幕上對其進行動畫處理。然而，按照我設置的方式，每當我選擇類並應用它並點擊提交按鈕時，它似乎刷新整個頁面。我知道這與使用POST方法有關，但我不知道如何。這裏是我的JS：將POST方法集成到動態創建的表單中

////////////////////////////////////////////////////////////////////////////////////////////////////////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/

任何幫助，將不勝感激

來源

2013-07-21 user1922019

我已經改變了你的代碼一點點更有效地做事情。

首先，我使用了事件委託，這意味着在執行過程中不需要添加更多的監聽器。事件傳播直到到達表單，然後單擊按鈕被識別並處理事件。

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

然後我得到選定的動畫和索引，從那裏你可以做任何你想做的事情。

表單與其餘頁面元素分開，並且只有一個表單，而不是每個sprite的表單。如果我自己做，我會通過創建一個Animator類來將「後端」（即驅動動畫師的代碼）與邏輯表示形式分開可以實例化並從頭開始創建整個接口，並且可重用且自包含。

查看示例here。

來源

2013-07-21 19:06:25 MasterAM

感謝這工作就像一個魅力。在表格提交上使用活動代表團是我失蹤的內容 – user1922019

不客氣。 BTW，表單不提交，只是在這種情況下點擊。代表團是一個相對未知的強大且性能增強的技術。 – MasterAM

將POST方法集成到動態創建的表單中

回答

相關問題