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

时间:2014-09-03 23:48:11

标签: c# jquery asp.net-mvc-4

我们有部分视图View1如下:

@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>

当用户点击主视图中的添加新项时,将动态添加部分视图。

当用户在动态添加的局部视图中的名称文本框中输入一些文本时,应该动态更新BusinessKey DisplayFor。

所以我在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); 
    });    
});

执行此代码正在更新所有动态添加的部分视图的business-key-id。如何控制特定于keydown事件控件的业务键?

1 个答案:

答案 0 :(得分:1)

此行选择类名为business-key-id

的所有元素
$(".business-key-id").html(...

更改选择器以仅选择下一个元素

$(".name-class").on(...
  $(this).next('.business-key-id').html(...

注意.live已弃用 - 您应该使用.on

修改

根据OP修订后的html,选择相应的business-key-id的选择器应为

$(this).closest('table').find('.business-key-id).html(...

并更改html以使用class属性,而不是id属性(重复ID是无效的html)

<span class="business-key-id">
  @Html.DisplayFor(x=>x.BusinessKey)
</span>