Question

单击“overview_table_header”类时，以下函数不会产生警报。我究竟做错了什么？

<div class='overview_table_wrapper'> 
      <table> 
        <thead> 
          <tr> 
            <th class='col_1'> 
              <span class='overview_table_header' data-sort='DESC'> 
                Contest
              </span> 
              <span class='arrow'>></span> 
            </th> 
            <th class='col_2'> 
              <span class='overview_table_header' data-sort='DESC'> 
                Tweets
              </span> 
              <span class='arrow'></span> 
            </th> 
            <th class='col_3'> 
              <span class='overview_table_header' data-sort='DESC'> 
                Starts
              </span> 
              <span class='arrow'></span> 
            </th> 
            <th class='col_4'> 
              <span class='overview_table_header' data-sort='DESC'> 
                Ends
              </span> 
              <span class='arrow'></span> 
            </th> 
          </tr> 
        </thead>

.js文件：

（我正在加载上面未显示的文件;其他jquery可以从这个文件中运行）

$('.overview_table_header').click(function() {
alert("clicked!");
});

Answer 1

1）确保页面中包含jQuery.js（在下面的代码片段之前） 2）在ready事件中添加click绑定并添加Script标签

<script type="text/javascript">
 $(function(){
   $('.overview_table_header').click(function() { alert("clicked!"); });
 });
</script>

Answer 2

将此部分放在页面的标题

中

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script>
$(document).ready(function(){
    $('.overview_table_header').click(function() {
        alert("clicked!");
    });
});
</script>

Answer 3

我不知道您的代码是如何构建的，但这是一个有效的结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>jQuery Test</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.20" />
    <script type="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/Javascript">
        $(document).ready(function(){
            $('.overview_table_header').click(function() {
                alert("clicked!");
            });
        });
    </script>
</head>

<body>
    <div class='overview_table_wrapper'> 
          <table> 
            <thead> 
              <tr> 
                <th class='col_1'> 
                  <span class='overview_table_header' data-sort='DESC'> 
                    Contest
                  </span> 
                  <span class='arrow'>></span> 
                </th> 
                <th class='col_2'> 
                  <span class='overview_table_header' data-sort='DESC'> 
                    Tweets
                  </span> 
                  <span class='arrow'></span> 
                </th> 
                <th class='col_3'> 
                  <span class='overview_table_header' data-sort='DESC'> 
                    Starts
                  </span> 
                  <span class='arrow'></span> 
                </th> 
                <th class='col_4'> 
                  <span class='overview_table_header' data-sort='DESC'> 
                    Ends
                  </span> 
                  <span class='arrow'></span> 
                </th> 
              </tr> 
            </thead> 
    </div>  
</body>

</html>

Answer 4

根据你提供的内容，这应该可以正常工作，但我想也许这个表也是用javascript生成的？如果是这样，您将需要使用委托方法将侦听器分配给这些span标记

<script>
$('.overview_table_wrapper').delegate('.overview_table_header','click', function() {
alert("clicked!");
});
</script>

Jquery还是HTML问题？为什么我的选择器不工作？

4 个答案: