We have partial view View1 as follows:
@using (Html.BeginCollectionItem)
{
<div id = "partialview-content>
<table >
<tr>
<td>
@Html.TextBoxFor(x=>x.Name, new {id = "name", @class = "name-class"})
// Additional controls
</td>
</tr>
<tr class="rowSpace">
<td>Label Text</td>
<td>
<span id="business-key-id">
@Html.DisplayFor(x=>x.BusinessKey)
</span>
</td>
</tr>
</table>
}
</div>
When user clicks on Add New Item in Main View, partial view will be added dynamically.
When user enters some text in name textbox in the dynamically added partial view, BusinessKey DisplayFor should be updated dynamically.
So I added below code in the JQuery:
$(document).ready(function () {
$(".name-class").live('keyup', function (event) {
var name1 = $("#name1").val();
var name2 = $("#name2").val();
var name = $(this).val();
(".business-key-id").html(trustName + ' ' + seriesName + ' ' + trancheName);
});
});
Doing this code is updating the business-key-id of all the dynamically added partial views. How can I get the control of the business-key specific to the keydown event control?
This line is selecting all elements with the class name business-key-id
$(".business-key-id").html(...
Change the selector to select only the next element
$(".name-class").on(...
$(this).next('.business-key-id').html(...
Note .live
has been depreciated - you should use .on
Edit
Based on OP's revised html, the selector to choose the coresponding business-key-id
should be
$(this).closest('table').find('.business-key-id).html(...
And change the html to use the class
attribute, not id
attribute (duplicate ID's are invalid html)
<span class="business-key-id">
@Html.DisplayFor(x=>x.BusinessKey)
</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.