javascript - javascript click事件仅适用于WebGrid MVC中的第一个元素

我有一个Webgrid，它会在页面加载时填充。在此网格中，我有一个元素，该元素具有单击时处理的javascript事件。在这里，我只是打算将用户发送到外部站点。我也将此绑定到控制器。两者都在为第一个元素工作。但是，如果涉及列表中第一个元素之后的任何内容，则不会调用javascript。

WebGrid：

@grid.GetHtml(tableStyle: "table table-striped table-bordered",
            headerStyle: "thead-default",
            columns: grid.Columns(
                grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) =>
                    new HtmlString(Html.CheckBox("post_tran_a", (bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" })
                    + " " +
                    Html.ActionLink((string)item.post_tran_a.month, "PostTransmission", Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link }, new { @id = "external-link", data_url=Url.Action() })
                    ))))

Javascript：

$("#external-link").click(function () {
    var url = $("#external-link").attr("data-url");
    alert(url);
});

如果这种方法行不通，我欢迎其他解决方案。

最佳答案

在您的特定情况下，最简单的方法可能像

$("table a").click(function () {
    // you need here 'this' it is available by default
   // and it points to the object on which click is called
    var url = $(this).attr("data-url");
    alert(url);
});

但是上面太笼统了。如果您有包含其他链接a的表，而您不想触发该表，那么采用更好的方法将失败

ID仅适用于一个元素。对于一组元素（例如，多个链接）。您需要使用该类并按类访问它们。

我用类替换了您的ID，并使用该名称访问了它。

grid.GetHtml(tableStyle: "table table-striped table-bordered",
            headerStyle: "thead-default",
            columns: grid.Columns(
grid.Column("post_tran_a", Model.year_a, canSort: false, format: (item) =>
    new HtmlString(Html.CheckBox("post_tran_a",
(bool)item.post_tran_a.is_reviewed, new { disabled = "disabled" })
                    + " " +
Html.ActionLink((string)item.post_tran_a.month, "PostTransmission",
Model.controller, new { report_id = item.post_tran_a.report_id, link = item.post_tran_a.link },

// See following carefully
new { @class="someuniquecalssname" data_url=Url.Action() })))))

现在，JavaScript将正常工作

$(".someuniquecalssname").click(function () {
    var url = $(this).attr("data-url");
    alert(url);
});

如果您不愿意添加类属性，那么在许多情况下可以创建像ex-link1，ex-link2这样的唯一ID。但是它们对于上述事件没有用