OnClick事件只获取第一个动态创建的行/ id

I have a table where if X has a value, display X, otherwise, add a link which when clicked will display a textbox where user can input the value. I dynamically assign IDs/classes to the link and textboxes but when I run the application, each click on any link only seems to trigger the first row. I put in alerts to show what row is being clicked and I always get the first row. Looking at the browser DOM explorer, I can see that each row has its own unique ID. How do I get each OnClick event to grab the correct corresponding ID?

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

C#/Razor code:

 <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

 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

DOM Explorer图片

3 个解决方案

#1

You can pass a parameter from your onclick event using the "this" keyword.

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

onclick="UnmappedClick(this.id)"

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

or if necessary pass the whole control over

或者如有必要,可以通过整个控制权

onclick="UnmappedClick(this)"

#2

you can try this

你可以试试这个

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

instead of

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

This will give you the current elements id when you click

单击时,这将为您提供当前元素ID

#3

As you can see here, using $('.class') will return a list all the elements with that class. When you use $(".unmapped").attr('id') you'll always get the value of the first element in the list, that's why you always get the first row.

正如您在此处所看到的,使用$('。class')将返回列表中包含该类的所有元素。当你使用$(“。unmapped”)。attr('id')时,你总是得到列表中第一个元素的值,这就是你总是得到第一行的原因。

The same will happen with var txtBox = $(".editAction").val();. With $(actTextBox).removeClass("hidden"); you'll remove the class hidden from all the elements matched.

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

To get the id of an element you can use onclick="unmapped(this) or onclick="unmapped(this.id)" using the following code depending on the onclick attribute

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

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

function unmapped(id) {
    alert(id)
}

You can check this fiddle to see them in action.

您可以检查这个小提琴,看看它们的实际效果。

#1