2013-03-16 15 views
0

我有我認爲可能是一個簡單的JQuery問題,但它引起我很頭疼。首先,我只寫了幾周的JQuery,所以我的代碼很薄弱。JQuery appendto html被添加到錯誤的地方

基於選擇選項和按鈕點擊我顯示一些HTML。顯示的HTML有按鈕,也可以點擊來顯示額外的HTML。我遇到的問題是當我顯示兩次相同的「父HTML」並單擊按鈕以顯示「子HTML」時如果在添加第二個「父HTML」後單擊該按鈕將「子HTML」添加到我的原始「父HTML」父母HTML「第一父母的」子女HTML「添加到第二父母的父母。我試圖增加我的ID /類變量來解決我的問題,但沒有成功。

\$('#productbtn').live('click', function(e) { 
(comtrinc++); 
(ctierinc++); 
if (\$('#prodselect option:selected').text() == "Commercial Attachments"){ 
\$('#my_table > tbody > tr').eq(14).after('<tr id="comattach0'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><tr name="commercial" id="comattach1'+(comtrinc)+'"><td ALIGN=left colspan=4><input id="buttonremc'+(comtrinc)+'" type="button" style="width: 110px; height: 22px;" value="Remove Product">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size=4><b><font color="#ADD8E6">Product: &nbsp;Commercial Attachments</b></font></td></tr><tr id="comattach2'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach3'+(comtrinc)+'"><td align=left><font color="#ADD8E6">Activity Type:</td><td align=left><select name="caacttype'+ (cainc++) +'" style="width:87px;"><option></option><option value="send">Send</option><option value="rec">Receive</option><option value="view">View</option></select></td><TD ALIGN=left><font color="#ADD8E6">Monthly Commission Percentage:</TD><TD ALIGN=left><input type="text" name="mthcom" maxlength=3 size=10 value="00"></TD><tr id="comattach4'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach5'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Annual Flat Rate:</TD><TD ALIGN=left><input type="text" name="afr'+ (afrinc++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Monthly Flat Rate:</TD><TD ALIGN=left><input type="text" name="mfr'+ (mfrinc++) +'" size=10 value="00.00" ></TD><TR id="comattach6'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Monthly Flat Rate Attachment Limit:</TD><TD ALIGN=left><input type="text" name="mfral'+ (mfralinc++) +'" size=10 ></TD><TD ALIGN=left><font color="#ADD8E6">Excess Attachment Rate:</TD><TD ALIGN=left><input type="text" name="ear'+ (earinc++) +'" size=10 value="00.00" ></TD><tr id="comattach7'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach11'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Minimum Monthly Charge:</TD><TD ALIGN=left><input type="text" name="minmc'+ (minmcinc++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Maximum Monthly Charge:</TD><TD ALIGN=left><input type="text" name="maxmc'+ (maxmcinc++) +'" size=10 value="00.00" ></TD><tr id="comattach15'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><TR id="comattach8'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Per Attachment Rate:</td><TD ALIGN=left><input type="text" name="par'+ (parinc++) +'" size=10 value="00.00" ></TD><td colspan=2>&nbsp;</td><TR id="comattach10'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Maximum Allowed Attachment Pages:</TD><TD ALIGN=left><input type="text" name="maap'+ (maapinc++) +'" size=10 ></TD><TD ALIGN=left><font color="#ADD8E6">Excess Page Rate:</TD><TD ALIGN=left><input type="text" name="epr'+ (eprinc++) +'" size=10 value="00.00" ></TD><tr id="comattach12'+(comtrinc)+'"><td colspan=4>&nbsp;</td></tr><tr id="comattach13'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Per Page Rate:</TD><TD ALIGN=left><input type="text" name="ppr'+ (pprinc++) +'" size=10 value="00.00" ></TD><td colspan=2>&nbsp;</td><TR id="comattach14'+(comtrinc)+'"><TD ALIGN=left><font color="#ADD8E6">Minimum Submission Charge:</TD><TD ALIGN=left><input type="text" name="minsc'+ (minscinc++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Maximum Submission Charge:</TD><TD ALIGN=left><input type="text" name="maxsc'+ (maxscinc++) +'" size=10 value="00.00" ></TD><tr class="comattach9'+(comtrinc)+'"><td colspan=4><input id="addtiercom'+(comtrinc)+'" type="button" style="width: 110px; height: 22px;" value="Add Tier"></td></tr>'); 


\$('#buttonremc').click(function() { 
\$('#comattach0, #comattach1, #comattach2, #comattach3, #comattach4, #comattach5, #comattach6, #comattach7, #comattach8, .comattach9, #comattach10, #comattach11, #comattach12, #comattach13, #comattach14, #comattach15').remove(); 
}) 
var raisetierid = 1; 
var rateplus = 1; 
    var rangeplus = 1; 
var catierrate = 1; 
var rangemin = 1; 
var rangemax = 1; 

\$('#addtiercom'+(comtrinc)+'').live('click', function(e) { 
\$('<tr id="commtier1'+(ctierinc)+'"><td colspan=4><input id="addnewtier'+(ctierinc)+'" type="button" style="width: 110px; height: 20px;" value="Add Tier" >&nbsp;&nbsp;<input id="removetiercom" type="button" style="width: 110px; height: 20px;" value="Remove Tier" ></td></tr><TR id="commtier2'+(ctierinc)+'"><TD ALIGN=left><font color="#ADD8E6">Tier Type</TD><TD ALIGN=left colspan=3>&nbsp;&nbsp;Attachments<input type="radio" name="brackettype" value="a">&nbsp;&nbsp;&nbsp;Pages<input type="radio" name="brackettype" value="p">&nbsp;&nbsp;&nbsp;Offices<input type="radio" name="brackettype" value="o"></TD><tr class="inctier'+(ctierinc) + (raisetierid++)+'"><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rateplus++) +' Rate</TD><TD ALIGN=left><input type="text" name="catierrate'+ (catierrate++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rangeplus++) +' Range</TD><TD ALIGN=left><font color="#ADD8E6">Minimum&nbsp;<input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" ><font color="#ADD8E6">&nbsp;Maximum&nbsp;<input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" ></TD>').appendTo('.comattach9'+(comtrinc)+''); 

\$('.comattach9'+(comtrinc)+'').hide(); 

\$('#addnewtier'+(ctierinc)+'').live('click', function(e) { 
\$('<tr class="inctier'+(ctierinc) + (raisetierid++) +'"><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rateplus++) +' Rate</TD><TD ALIGN=left><input type="text" name="catierrate'+ (catierrate++) +'" size=10 value="00.00" ></TD><TD ALIGN=left><font color="#ADD8E6">Tier '+ (rangeplus++) +' Range</TD><TD ALIGN=left><font color="#ADD8E6">Minimum&nbsp;<input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" ><font color="#ADD8E6">&nbsp;Maximum&nbsp;<input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" ></TD>').appendTo('.inctier'+(ctierinc)+'1'); 

}) 
+0

由於您的問題是關於編輯HTML,這將是任何相關的HTML代碼添加到您的OP一個好主意。 – Sparky 2013-03-16 04:08:07

+0

@sparky我發佈的所有HTML都已發佈。 – kyle 2013-03-16 04:12:27

+0

如果你想得到幫助,而不是張貼一堆未格式化的代碼,創建併發佈一個孤立的簡單例子**只有相關的代碼**,再現你的問題,更好地創建一個[jsFiddle](http:// jsfiddle .net /) – peterm 2013-03-16 04:25:59

回答

0

我相信這是一個ID衝突問題。我切換到按鈕上的類,並添加了一些if,否則有條件循環來確定將變量值附加到trid上。

http://jsfiddle.net/JXeMS/30/

$