我在按钮点击时将html添加到页面。显示的HTML有一个额外的按钮，可以在按钮点击时添加HTML。在添加“主HTML”两次后，如果我从添加的主HTML的第一个实例中单击辅助按钮，它会将HTML添加到添加的主HTML的第二个实例中。
我认为这是ID冲突。我把头发拉过来。
这是一个显示问题的jsfiddle。
创建问题：添加产品，添加2-3层，再次添加产品，添加2-3层。最后，从第一个添加的产品中添加一个新层，并将该层添加到第二个添加的产品中。卫生署！
JQuery代码
$(document).ready(function() {
var cainc = 1;
var afrinc=1;
var mfrinc=1;
var mfralinc=1;
var earinc=1;
var minmcinc=1;
var maxmcinc=1;
var parinc=1;
var maapinc=1;
var eprinc=1;
var pprinc=1;
var minscinc=1;
var maxscinc=1;
$('#productbtn').on('click', function() {
if ($('#prodselect option:selected').text() == "Commercial Attachments"){
$('#productbtn').closest( "tr" ).after('<tr id="comattach0'+comtrinc+'"><td colspan=4> </td></tr><tr name="commercial" id="comattach1"><td ALIGN=left colspan=4><input id="buttonremc" type="button" style="width: 110px; height: 22px;" value="Remove Product"><font size=4><b><font color="#ADD8E6">Product: Commercial Attachments</b></font></td></tr><tr id="comattach2"><td colspan=4> </td></tr><TR id="comattach3"><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"><td colspan=4> </td></tr><TR id="comattach5"><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"><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"><td colspan=4> </td></tr><TR id="comattach11"><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"><td colspan=4> </td></tr><TR id="comattach8"><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> </td><TR id="comattach10"><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"><td colspan=4> </td></tr><tr id="comattach13"><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> </td><TR id="comattach14"><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 id="comattach9"><td colspan=4><input id="addtiercom" type="button" style="width: 110px; height: 22px;" value="Add Tier"></td></tr>');
var raisetierid = 1;
var rateplus = 1;
var rangeplus = 1;
var catierrate = 1;
var rangemin = 1;
var rangemax = 1;
$('#addtiercom').on('click', function() {
$('#addtiercom').closest( "tr" ).after('<tr id="commtier1"><td colspan=4><input id="addnewtier" type="button" style="width: 110px; height: 20px;" value="Add Tier" > <input id="removetiercom" type="button" style="width: 110px; height: 20px;" value="Remove Tier" ></td></tr><TR id="commtier2"><TD ALIGN=left><font color="#ADD8E6">Tier Type</TD><TD ALIGN=left colspan=3> Attachments<input type="radio" name="brackettype" value="a"> Pages<input type="radio" name="brackettype" value="p"> Offices<input type="radio" name="brackettype" value="o"></TD><tr id="inctier'+(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 <input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" ><font color="#ADD8E6"> Maximum <input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" ></TD></tr>');
$('#comattach9').hide();
$('#addnewtier').on('click', function() {
$('#inctier'+(raisetierid-1)+'').closest( "tr" ).after('<tr id="inctier'+(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 <input type="text" name="rangemin'+ (rangemin++) +'" size=10 value="" ><font color="#ADD8E6"> Maximum <input type="text" name="rangemax'+ (rangemax++) +'" size=10 value="" ></TD>');
});
});
}
});
});
答案 0 :(得分：0)
出现此问题的原因是您在其他事件处理程序中绑定事件处理程序，以及创建具有相同ID的多个元素。
我建议您更频繁地使用this关键字，并将委托事件处理程序绑定到最近的静态父级（也不是嵌套式处理程序！），当然也可以切换到类。
例如：
$('body').on('click', '.product-button', function() {
// Your code for product buttons
// $(this) is the button that's clicked
});
$('body').on('click', '.add-tier', function() {
// Your code for adding a tier
});
...等
答案 1 :(得分：0)
您需要更改此部分：
$('.addtierbtn' + comtrinc + '').on('click', function () {
$('#inctier' + (comtrinc) + (raisetierid - 1) + '').closest("tr").after('<tr id="inctier' + (comtrinc) + **(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 <input type="text" name="rangemin' + (rangemin++) + '" size=10 value="" ><font color="#ADD8E6"> Maximum <input type="text" name="rangemax' + (rangemax++) + '" size=10 value="" ></TD>');
});
}); } });
});
raisetierid ++应该是raisetierid -
答案 2 :(得分：0)