javascript点击事件只对WebGrid MVC中的第一个元素起作用

本文关键字：第一个 元素 起作用 MVC WebGrid 事件 javascript | 更新日期: 2023-09-27 18:15:27

我有一个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);
});

如果这种方法不起作用，我愿意考虑其他解决方案。

javascript点击事件只对WebGrid MVC中的第一个元素起作用

在您的特殊情况下最简单的方法可能是

$("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);
});

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

使用id选择元素，id在页面中必须是唯一的。在代码中设置它们时，使用类或唯一id @id = "external-link--xxx"

你也可以在jquery选择器

中使用不同的选择器
$("#yourtableid a").click(function () {
   var url = $("#external-link").attr("data-url");
   alert(url);
});
相关文章：