点击触发具有相同ID的多个元素的js函数

Question

I have a number of links inside my ASP grid view. Each link is supposed to fire a Javascript function after clicking it by calling their respective ID. Here is the code for it:

<script type="text/javascript">
  $(function () {
    $('#LkForgot').on('click', function (e) {
      alert("hi");
    });
  });
</script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ReportId"CssClass="GridViewStyle">
<asp:TemplateField>
  <ItemTemplate>
    <asp:ImageButton CssClass="Link" ID="IMGDetail" ClientIDMode="Static" runat="server" ImageUrl="~/Img/Detail.png" />
  </ItemTemplate>
</asp:TemplateField>

All of them have the same ID, but only the first one successfully fires the function. I want each link to separately fire the function.

Answer 1

<script type="text/javascript">
$(function () {
    $('.Link').on('click', function (e) {
        alert("hi");
    });
});

Answer 2

I don't now about asp but IDs are supposed to be unique. Try populating the IDs dynamically or try using classes.

Answer 3

You are using ID and it should unique , that's why it will work on only one element try with class. You can apply same class to multiple element.

<script type="text/javascript">
$(function () {
    $('.LkForgot').on('click', function (e) {
        alert("hi");
    });
});

Answer 4

You have to identify a unique attribute in the element and use that as the unique identifier. It does not always have to be the 'id' tag. you could do something like this as well

$("[ClientIDMode='Static']").bind("click", function(){console.log("clicked") })