jquery - ソースが利用できないテーブルのjQuery html

Question

間違った木を吠えているのか、それともただのノブなのかわかりません...

私は ajax 呼び出しを行っており、成功すると、.html を使用して返された応答でテーブルを置き換えます。(私も .replaceWith(response) を使用してみましたが、どちらも機能しません)

この部分はすべて正常に機能しており、テーブル項目が戻ってきてテーブルにデータが入力されています...しかし、ブラウザのソースを見ると、ソースの間に何もありません..それはjQueryの方法と関係があると思います.物を返す...

問題は、選択したa.deleteの「Id」属性を取得したいのですが、値を取得できません。

これが私のコードの内訳です...フィールドを簡素化してスペースを節約しました

私の見解：

<tr>
        @using (Html.BeginForm("AddSample", "SPR", FormMethod.Post))
        { 
            <th>
            </th>

            <th>@Html.TextBox("CustomerSampleId", null, new { style = "width: 80px" })
            </th>
            <th>@Html.TextBox("CustomerSampleId2", null, new { style = "width: 80px" })
            </th>
            <th>@Html.TextBox("CustomerSampleId3", null, new { style = "width: 80px" })
            </th>                 
        }
        <th>
            <button class="button saveSampleButton" id="saveSampleButton">
                Add Sample</button>
        </th>
    </tr>
</thead>
<tbody>
</tbody>

私の部分:

@for (int i = 0; i < Model.Count(); i++)

{変数番号= i + 1;

<tr>
    <td>@number
    </td>
    <td>
        <a href="#" id="@Model.ElementAt(i).Id" class="delete">
            <img src="/images/delete.png" /></a>

        @Model.ElementAt(i).CustomerSampleId
    </td>
    <td>@Model.ElementAt(i).CustomerSampleId2
    </td>
    <td>@Model.ElementAt(i).CustomerSampleId3
    </td>
</tr>

}

保存を行うjQuery

$("#saveSampleButton").click(function () {

        //validate fields

        if (fieldsValid) {

            $.ajax({
                url: "/SPR/AddSample",
                type: "POST",
                data: { data: data
                },
                success: function (pId) {
                    GetSamples(pId);

                },
                error: function () {
                    alert("Something went wrong : Were all the necessary fields filled in?");
                }
            });
            return false;
        }
    });

  function GetSamples(pId) {
        $.ajax({
            url: "/SPR/GetSamples",
            type: "POST",
            data: { Id: pId },
            success: function (response) {
                $("#Samples tbody").html(response);
            }
        });
    }

いくつかのサンプルを追加して、ブラウザのソースを見ると、次のようになります。

<tr>
  <form action="/SPR/AddSample" method="post">                <th>
            </th>
            <th><input id="CustomerSampleId" name="CustomerSampleId" style="width: 80px" type="text" value="" />
            </th>
            <th><input id="CustomerSampleId2" name="CustomerSampleId2" style="width: 80px" type="text" value="" />
            </th>
            <th><input id="CustomerSampleId3" name="CustomerSampleId3" style="width: 80px" type="text" value="" />
            </th>                

               </form>            <th>
              <button class="button saveSampleButton" id="saveSampleButton">Add Sample</button>
        </th>
    </tr>
</thead>
<tbody>
</tbody>

何が起こっているのか、そしてなぜ私がa.deleteリンクのIDにアクセスできないのか、誰かに光を当てることができますか???