在JQuery中找到动态添加的局部视图范围内容的控件

Question

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?

Answer 1

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>