jQuery附加動態表格

Question

我試圖在用戶點擊鏈接時將表單附加到div上。我寫了完成我的任務的示例代碼，但是，我想知道如何防止函數進行多次迭代。

這裏是我的代碼：

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    function moveForm(element) { 
     $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'"> <input type="button" name="myButton" value="Test" /></form></div>'); 
} 
</script> 

<div style="border-color:black; border-style:dashed;"> 
<div id="myItem_1"> 
Item #1 <a href="javascript:moveForm('myItem_1')">View Form</a> 
</div> 
<div id="myItem_2"> 
Item #2 <a href="javascript:moveForm('myItem_2')">View Form</a> 
</div> 
<div id="myItem_3"> 
Item #3 <a href="javascript:moveForm('myItem_3')">View Form</a> 
</div> 
</div> 

正如你可以看到，上述工程的代碼，但是當你點擊任何「查看錶」鏈接，形式出現的時候，也無限多對每個元素都顯示。我希望表單只顯示一次，無論點擊哪個「查看錶單」鏈接。我還希望表單出現在正確的元素下，例如：

如果我點擊項目＃1的「查看錶單」，表單應顯示在單詞「項目＃1」下。

如果我然後點擊項目＃3的'查看窗體'，窗體應該出現在「項目＃3」的下面，並且應該爲「項目＃1」消失。

我覺得我在正確的軌道上，但我可以使用一些幫助。

預先感謝您。

Answer 1

刪除內聯事件處理程序（它們是不好的做法，你真的不需要他們，尤其是當你使用jQuery），給您的鏈接類：

<a href="#" class="formLink">

然後使用下面的jQuery：

$(".formLink").one("click", function() { 
    $("#oneForm").remove(); 
    $(this).after('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+ $(this).parent().attr("id") +'"> <input type="button" name="myButton" value="Test" /></form></div>'); 
}); 

這附加一個單擊事件處理程序與類「formLink」的所有元素，這將只運行一次（這是one方法的點）。在事件處理程序中，可以使用after方法在clicked元素後面插入內容，並使用remove方法刪除以前添加的元素（如果有）。

這是working example。

更新

我實際上不是100％肯定，如果上面不正是你想要的東西（如果你點擊一個鏈接，然後另一個，則無法再次單擊第一個鏈接）。如果你希望能夠做到這一點，用這個來代替（一個普通的老click事件處理程序，而不是one法）：

$(".formLink").click(function() { 
    $("#oneForm").remove(); 
    $(this).after('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+ $(this).parent().attr("id") +'"> <input type="button" name="myButton" value="Test" /></form></div>'); 
}); 

這裏的另一個example這個版本。

Answer 2

第一刪除它：

function moveForm(element) { 
    $('#oneForm').remove() 
    $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'"> <input type="button" name="myButton" value="Test" /></form></div>'); 
} 

Answer 3

oneForm刪除每次：

這裏是它的一個jsFiddle。

<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script language="javascript" type="text/javascript"> 
    function moveForm(element) { 

     $('#oneForm').remove(); 

     $("#"+element).append('<div id="oneForm"> <form name="myForm" id="myForm" method="post" action=""><input type="text" id="'+element+'"> <input type="button" name="myButton" value="Test" /></form></div>'); 
} 
</script> 

<div style="border-color:black; border-style:dashed;"> 
<div id="myItem_1"> 
Item #1 <a href="javascript:moveForm('myItem_1')">View Form</a> 
</div> 
<div id="myItem_2"> 
Item #2 <a href="javascript:moveForm('myItem_2')">View Form</a> 
</div> 
<div id="myItem_3"> 
Item #3 <a href="javascript:moveForm('myItem_3')">View Form</a> 
</div> 
</div>