JQuery или HTML проблема? Почему мой селектор не работает? - PullRequest
Новая
       0

JQuery или HTML проблема? Почему мой селектор не работает?

0 голосов
/ 29 июня 2011

Следующая функция не выдает предупреждение, когда я щелкаю по классу 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!");
});

Ответы [ 4 ]

2 голосов
/ 29 июня 2011

1) Убедитесь, что файл jQuery.js включен в страницу (перед фрагментом кода ниже).
2) Добавьте привязку клика в событие ready и добавьте теги Script 

<script type="text/javascript">
 $(function(){
   $('.overview_table_header').click(function() { alert("clicked!"); });
 });
</script>
1 голос
/ 29 июня 2011

Поместите эту часть в свой заголовок страницы 

<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>
0 голосов
/ 29 июня 2011

С тем, что вы нам предоставили, это должно работать нормально, но я думаю, что, возможно, эта таблица также генерируется с помощью JavaScript? Если это так, вам нужно будет использовать метод делегата для назначения прослушивателей этим тегам span 

<script>
$('.overview_table_wrapper').delegate('.overview_table_header','click', function() {
alert("clicked!");
});
</script>
0 голосов
/ 29 июня 2011

Я не знаю, как именно вы структурировали свой код, но вот структура, которая работает: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...