Question

我有一个表，如果X有值，则显示X，否则，添加一个链接，单击该链接将显示一个文本框，用户可以在其中输入值。我动态地为链接和文本框分配ID /类，但是当我运行应用程序时，每次点击任何链接似乎只会触发第一行。我发出警报以显示正在点击的行，我总是得到第一行。查看浏览器DOM资源管理器，我可以看到每一行都有自己的唯一ID。如何让每个OnClick事件获取正确的相应ID？

C＃/ Razor代码：

 <td>
      <a href="#" class="unmapped" onclick="UnmappedClick()" id="@string.Format("tr{0}",i)">Unmapped</a>
      <input type ="submit" class="editAction hidden" value="@string.Format("tr{0}",i)" name="action:ChangeToEditSubAction" />
      <input type="hidden" name="@Html.Raw("EntityMapping.EMREntityID")" value="@Html.Raw(Model.DisplayResults[i].EMREntityID)" />
      <span class="@string.Format("tr{0}accountTxtBox",i) hidden">@Html.TextBoxFor(m => m.EntityMapping.AssignedHOAccountID)</span> </td>

Javascript功能

 function UnmappedClick() {
    //$(".accountTxtBox").removeClass("hidden");
    //$(".unmapped").addClass("hidden");
    //$("#btnSave").removeAttr('disabled');
    //$(".editAction").click();
    //$(".editAction").val(null);

    alert($(".unmapped").attr('id'));
    var txtBox = $(".editAction").val();
    var actTextBox = "." + txtBox + "accountTxtBox";
    $(actTextBox).removeClass("hidden");
    alert(txtBox);

}

DOM Explorer Image

Answer 1

您可以使用“this”关键字从onclick事件传递参数。

onclick="UnmappedClick(this.id)"

function UnmappedClick(id){
 //now you have the specific ID
}

或者必要时将整个控制权交给

onclick="UnmappedClick(this)"

Answer 2

你可以试试这个

$(this).attr('id') // use this

而不是

$(".unmapped").attr('id')

当您单击

时，这将为您提供当前元素ID

Answer 3

正如您所见here，使用$('.class')将返回列表中包含该类的所有元素。当您使用$(".unmapped").attr('id')时，您将始终获得列表中第一个元素的值，这就是您始终获得第一行的原因。

var txtBox = $(".editAction").val();会发生同样的情况。使用$(actTextBox).removeClass("hidden");，您将删除所有匹配元素中隐藏的类。

要获取元素的ID，您可以使用以下代码onclick="unmapped(this)或onclick="unmapped(this.id)"，具体取决于onclick属性

function unmapped(element) {
    var id = $(element).attr('id')
    alert(id)
}

function unmapped(id) {
    alert(id)
}

您可以查看this fiddle以查看它们的实际效果。

OnClick事件仅获取第一个动态创建的行/ ID

3 个答案: