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

Question

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

网络网格：

@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);
});

如果这种方法行不通，我愿意接受其他解决方案。

Answer 1

您正在使用 id select 元素，id 在页面上必须是唯一的。在代码中设置时使用 class 或唯一 ID @id = "external-link--xxx"

您也可以在 jquery selector

中使用不同的 selector

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

Answer 2

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

$("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 仅适用于一个元素。对于一组元素（例如多个链接）。您需要使用 class 并通过 class 访问它们。

我用 class 替换了你的 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);
});

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

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

javascript click event working only for first element in WebGrid MVC

javascript

c#

model-view-controller

jquery

webgrid