0

我在按钮单击时将 html 添加到页面。显示的 HTML 有一个附加按钮，可在单击按钮时添加 HTML。添加“主 HTML”两次后，如果我从添加的主 HTML 的第一个实例中单击辅助按钮，它会将 HTML 添加到添加的主 HTML 的第二个实例中。

我认为这是一个ID冲突。我正在把头发拉出来。

这是一个显示问题的jsfiddle。

http://jsfiddle.net/JXeMS/19/

要创建问题：添加产品，添加 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>&nbsp;</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: &nbsp;Commercial Attachments</b></font></td></tr><tr id="comattach2"><td colspan=4>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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" >&nbsp;&nbsp;<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>&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 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&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></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&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>');
                });
            });
        }
    });
});
4

3 回答 3

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
});

...ETC

于 2013-03-21T02:00:42.503 回答
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&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>');
                });
            }); } });
});

raisetierid++ 应该是 raisetierid--

于 2013-03-21T02:22:46.970 回答
0

我相信这是一个身份冲突问题。我切换到按钮上的类并添加了一些 if、if else 条件循环以确定附加到 tr id 的变量值。

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

 $
于 2013-03-22T02:52:06.107 回答