Question

我已经构建了这个页面：

http://www.rawlinspaints.com/development/form2.html

但是当您添加新产品时，“产品”下拉列表不再有效。

我被告知这是因为我需要在新元素中添加“click事件”，并确保新元素在ID方面是唯一的。我不是程序员，所以可以用一些指针来做真的！

非常感谢任何帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

<script type='text/javascript'>
$(document).ready(function () {
 $("#product").change(function () {
     var selected = $("#product option:selected").val();
     $('div').hide();
     $('#' + selected).show();

 });
 $('div').hide();
 });
</script>
<script type='text/javascript' src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){


$(function () {
$('table').on('click', 'tr a', function (e) {
    e.preventDefault();
    $(this).parents('tr').remove();
});

$("#addTableRow").click(function() {
    $("#mans").each(function () {
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
    });
});
});


}//]]>  

</script>

<style type="text/css">
body,th {
font-size: 14px;
font-weight:bold;
color: #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
td{
    background-color:#ebebeb;
border-top:1px solid #cccccc;
}
input,select {border-radius:6px;border:1px solid #ccc;padding:10px;}
img{float:right;margin-top: -141px;
margin-left: -67px;
margin-right: 26px;}
</style>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table width="800" border="0" cellspacing="0" cellpadding="10" id="mans">
    <tr>
        <td>
         Product: <select id="product">
<option value="0">Select a Product</option>
<option value="1">Stair Nosing</option>
<option value="2">Stair Tread Covers</option>
<option value="3">Landing Covers</option>
<option value="4">Flat Plate</option>
<option value="5">50mm Convex Decking Strips</option>
<option value="6">100mm Convex Decking Strips</option>
<option value="7">Fixings</option>
</select>
<div id="1">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="StairNosingColour">
<option value="Colour">Select a Colour</option>
<option value="1">Yellow</option>
<option value="2">Black</option>
<option value="3">White</option>
<option value="4">Luminous</option>
</select></br>
Size:
<select id="StairNosingSize">
<option value="Size">Select a Size</option>
<option value="1">750mm Length (L to R) x 55mm Depth (going)</option>
<option value="2">1000mm Length (L to R) x 55mm Depth (going)</option>
<option value="3">1500mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">2000mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">2500mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 55mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
<img src="nosing.jpg" width="150" height="150" alt="" />
</div>
<div id="2">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="StairTreadCoversColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black with White Nosing</option>
<option value="2">Black with Yellow Nosing</option>
</select></br>
Size:
<select id="StairTreadCoversSize">
<option value="Size">Select a Size</option>
<option value="1">750mm Length (L to R) x 345mm Depth (going)</option>
<option value="2">1000mm Length (L to R) x 345mm Depth (going)</option>
<option value="3">1500mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">2000mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">2500mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 345mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
<img src="stc.jpg" width="150" height="150" alt="" />
</div>
<div id="3">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="LandingCoversColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black with Yellow Nosing</option>
</select></br>
Size:
<select id="LandingCoversSize">
<option value="Size">Select a Size</option>
<option value="1">1220mm Length (L to R) x 1220mm Depth (going)</option>
<option value="2">2440mm Length (L to R) x 1220mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
<img src="lc.jpg" width="150" height="150" alt="" />
</div>
<div id="4">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="FlatPlateColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
<option value="1">Grey</option>
</select></br>
Size:
<select id="FlatPlateSize">
<option value="Size">Select a Size</option>
<option value="1">1220mm Length (L to R) x 1220mm Depth (going)</option>
<option value="2">2000mm Length (L to R) x 1000mm Depth (going)</option>
<option value="3">2440mm Length (L to R) x 1220mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled     Holes">
<img src="fp.jpg" width="150" height="150" alt="" />
</div>
<div id="5">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="50mmStripColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
</select></br>
Size:
<select id="50mmStripSize">
<option value="Size">Select a Size</option>
<option value="1">1000mm Length (L to R) x 50mm Depth (going)</option>
<option value="2">1500mm Length (L to R) x 50mm Depth (going)</option>
<option value="3">2000mm Length (L to R) x 50mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 50mm Depth (going)</option>
<option value="5">3600mm Length (L to R) x 50mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
<img src="ds.jpg" width="150" height="150" alt="" />
</div>
<div id="6">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="100mmStripColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
</select></br>
Size:
<select id="100mmStripSize">
<option value="Size">Select a Size</option>
<option value="1">1000mm Length (L to R) x 100mm Depth (going)</option>
<option value="2">1500mm Length (L to R) x 100mm Depth (going)</option>
<option value="3">2000mm Length (L to R) x 100mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 100mm Depth (going)</option>
<option value="5">3600mm Length (L to R) x 100mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
<img src="ds.jpg" width="150" height="150" alt="" />
</div>
<div id="7">
Quantity: <input name="Quantity" type="text" value=""></br>
Size:
<select id="FixingSize">
<option value="Size">Select a Size</option>
<option value="1">SureStep Clear Adhesive 310ml Cartridge</option>
<option value="2">Box of 100 Self Drilling Screws M4.8 x 25mm</option>
<option value="3">Box of 100 Wood Screws & Plugs M4.8 x 35mm</option>
<option value="4">Square Plate, Nut & Bolt 45 x 45mm M8 x 35mm</option>
</select>
</div>

        </td>
                    <td><a href="#">Remove Product</a>

        </td>
    </tr>
</table>
</form>
<button type="button" id="addTableRow">Add Another Product</button>
</body>
</html>

Answer 1

当您尝试添加新产品时，您获得了重复的“ID”。在这种情况下使用class而不是'id'。

将点击事件绑定到新元素＆amp;使ID独特

1 个答案: