下面的代码动态添加所选行（基于该行的复选框）。到目前为止，我无法显示（使用警报功能）新添加的行'/ row的第一个元素的选项值。
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(
function ()
{
$("#DuplicateRow").click
(
function ()
{
var checkboxValues = [];
$('input[type="checkbox"]:checked').each
(
function()
{
var $chkbox=$(this);
var $actualrow = $chkbox.closest('tr');
var $clonedRow = $actualrow.clone();
$clonedRow.find("select").each
(
function(i)
{
this.selectedIndex = $actualrow.find("select")[i].selectedIndex;
}
)
$chkbox.closest('#tabletomodify').append( $clonedRow );
}
);
}
);
$("#DeleteRow").click
(
function ()
{
var checkboxValues = [];
$('input[type="checkbox"]:checked').each
(
function()
{
var $chkbox=$(this);
$(this).closest("tr").remove();
}
);
}
);
$("#AddRow").click
(
function ()
{
var row = document.getElementById("row"); // find row to copy
var table = document.getElementById("tabletomodify"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "row"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
);
$('.selcompany').on('change', function () {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
});
}
);
</script>
</head>
<table cellpadding="10" style="border:2px solid black;" id="tabletomodify">
<tr bgcolor="#360584">
<td style="border:1px solid black;" colspan="15"><font face="Arial" size="4" color="white"><b><i>Records</i></b></font>
</td>
</tr>
<tr>
<td>
<button id="AddRow">Add Row</button>
</td>
<td>
<button id="DuplicateRow">Duplicate Row</button>
</td>
<td>
<button id="DeleteRow">Delete Row</button>
</td>
</tr>
<tr bgcolor="#360584">
<td><font face="Arial" size="2" color="white">Company </font>
</td>
<td><font face="Arial" size="2" color="white">Product</font>
</td>
<td><font face="Arial" size="2" color="white">Model</font>
</td>
<td><font face="Arial" size="2" color="white">State</font>
</td>
<td><font face="Arial" size="2" color="white">City</font>
</td>
<td><font face="Arial" size="2" color="white">Quantity</font>
</td>
<td><font face="Arial" size="2" color="white">Contact Mail ID</font>
<td><font face="Arial" size="2" color="white">Select</font>
</td>
<tr id="row">
<td>
<select class="selcompany"><option>one</option><option>two</option></select>
</td>
<td>
<select><option>one</option><option>two</option></select>
</td>
<td>
<select><option>one</option><option>two</option></select>
</td>
<td>
<select><option>one</option><option>two</option></select>
</td>
<td>
<select><option>one</option><option>two</option></select>
</td>
<td>
<input type="text" value="N/A" style="width:65px"/>
</td>
<td>
<input type="text" value="N/A" style="width:65px"/>
</td>
<td>
<input type="checkbox" id="checkbox" />
</td>
</tr>
</table>
答案 0 :(得分：1)
将$('.selcompany').on('change', function () 更改为 $('#tabletomodify').on('change','.selcompany', function ()
$('#tabletomodify').on('change','.selcompany', function ()
{
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
});
发生问题的原因是在将元素添加到DOM之前附加了事件观察者。
演示： JsFiddle