点击多个具有相同 id 的元素时触发 js 函数答案

【问题标题】：Fire a js function on click for multiple elements with the same id点击多个具有相同 id 的元素时触发 js 函数
【发布时间】：2015-12-23 08:33:53
【问题描述】：

我的 ASP 网格视图中有许多链接。每个链接都应该在通过调用它们各自的 ID 单击它后触发一个 Javascript 函数。这是它的代码：

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

它们都具有相同的 ID，但只有第一个成功地触发了该函数。我希望每个链接分别触发该功能。

【问题讨论】：

对所有人使用相同的类并使用选择器作为 ('.classname') 来监听事件
您可以使用 JQuery 中的 CSS 选择器将 click 事件绑定到在您的特定 GridView 中具有 link 类的所有元素，如下所示：$("#GridView1 .Link").click(function() { alert("hi"); });。
同一个ID！这符合 HTML 标准吗？

标签： javascript html gridview onclick

【解决方案1】：

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

【讨论】：

【解决方案2】：

我现在不关心 asp，但 ID 应该是唯一的。尝试动态填充 ID 或尝试使用类。

【讨论】：

【解决方案3】：

您正在使用 ID 并且它应该是唯一的，这就是为什么它只能在一个元素上使用 class。您可以将同一类应用于多个元素。

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

【讨论】：

【解决方案4】：

您必须识别元素中的唯一属性并将其用作唯一标识符。它并不总是必须是“id”标签。你也可以这样做

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

【讨论】：