Question

我有一个在页面加载时填充的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);
});

如果这种方法不起作用，我会接受替代解决方案。

Answer 1

您正在使用id来选择元素，页面上的id必须是唯一的。在代码@id = "external-link--xxx"

中设置类或唯一ID时使用它们

您还可以在jquery选择器中使用不同的选择器

$("#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替换了你的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 click事件仅适用于WebGrid MVC中的第一个元素

2 个答案: