javascript - Gridview TH 中未引发 jQuery 事件

Question

我有一个 GridView ，其中填充了一些数据。

<asp:GridView ID="GridView1" runat="server" ClientIDMode="Static">
</asp:GridView>

代码:

    if (!IsPostBack)
    {
        using (DataClassesDataContext dc = new DataClassesDataContext())
        {
            GridView1.DataSource = dc.Regions.ToList();
            GridView1.DataBind();
        }
    }

我希望当我点击 TH 部分时显示一个警报。我编写了以下代码:

   <script type="text/javascript">
    $('#GridView1 th').on("click", function () {
        alert("nima");
     });   
</script>

但它不起作用。我的错误在哪里？

谢谢

<小时/>

编辑1)我编辑主要问题并为选择器添加 '。我忘记输入它。问题是当我编写这段代码时它可以工作。我想知道它不起作用:

$('body').live('click','#GridView1 th', function () {
        alert("hello");
    });  

Answer 1

你确定你正在写 $(#GridView1 th) ？至少应为$('#GridView1 th') ...并检查“查看源代码”以查看正确的 ID 是否就像嵌套在其他 ASP.NET 控件中一样永远不会是 GridView1 ...

为了在任何 ASP.NET 控件中安全，您应该使用 ClientID属性，因此您可以随时编写:

<script type="text/javascript">
    var grid = '<%= GridView1.ClientID %>';
    $("#" + grid + " th").on("click", function () {
        alert("hello");
     });   
</script>

并在源代码中验证是否确实有表头 <th>据我所知，它在 GridView 中是可选的早些时候...

从您的代码中，您只是忘记了脚本一旦出现在页面上就会运行，而且大多数情况下当表代码不存在时...

更改此:

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#GridView1 th').on('click', function () {
        alert("nima");
    });  
</script>

进入此

<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
       $('#GridView1 th').on('click', function () {
          alert("nima");
       });  
    });
</script>

或者只是将脚本代码附加到页面末尾，这样当浏览器到达该行时，所有其他代码都已渲染并可用于 DOM。

这是您的代码的实时示例:http://jsbin.com/etamug/edit#javascript,html只需单击渲染按钮即可查看一切正常运行...

我用过$(function() {});作为一种快捷方式，但原始方法是我在这个答案中指定的方法。

您可以找到更多信息有关 $(document).ready()在 jQuery website