我有一个 Knockout js foreach 循环围绕一个返回多个用户的表和一个搜索按钮,供每个返回的用户搜索该记录。按钮和数据按应有的方式绘制,但是当我单击任何搜索按钮时,它只返回第一个用户。我相信这是因为搜索按钮的 id 总是相同的,需要与 DOM 交互以添加每个功能?这是正确的,如果是这样,这是如何完成的?
<!-- ko foreach: $data -->
<table class="table table-striped, table-bordered" id="customer-results-policy">
<thead>
<tr>
<th>
Title
</th>
<th>
First Name
</th>
<th>
Surname
</th>
<th>
Date of birth
</th>
<th>
Email
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span data-bind="text: Customer.Title"></span>
</td>
<td>
<span data-bind="text: Customer.Forename"></span>
</td>
<td>
<span data-bind="text: Customer.Surname"></span>
</td>
<td>
<span data-bind="dateString: Customer.DateOfBirth"></span>
</td>
<td>
<div><input type="text" id="email-search-box-customer" class="span3 search-query" readonly="readonly" data-bind="value: Customer.Email" /> <br/>
<button type="submit" data-bind="click: $parent." class="btn btn-primary submit-email-search-customer">Search for this customer</button> </div>
</td>
</tr>
</tbody>
</table>
<!-- /ko -->
JS
$('#page-parent').on('click', '.submit-email-search-customer', function () {
$('.submit-email-search-customer').each(function() {
});
var email = $('#email-search-box-customer').val();
var dataExists;
{
dataExists = viewModel.refreshViewByEmail(email);
}
if (!dataExists) {
$('#error-message').html("<strong>The email address wasn't recognised -- please check and try again</strong>");
$('#error-display').show('slow');
return false;
} else {
$('#search-results-many').hide();
$('#customer-results-email').show();
$("#search-results").show('slow');
$("#modify-button").show('slow');
$("#customer-modify").show();
$("#account-results").show();
$("#address-results").show();
}