Jquery or HTML problem? Why isn't my selector working?
Question
The following function does not produce an alert when I click on the 'overview_table_header' class. What am I doing wrong?
<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 file:
(I'm loading this file above not shown; other jquery works from this file)
$('.overview_table_header').click(function() {
alert("clicked!");
});
4 answers
solution1
2 ACCPTED 2011-06-28 21:55:54
1) Make sure jQuery.js is included in the page(before the code snippet below).
2) Add the click binding in the ready event and add Script tags
<script type="text/javascript">
$(function(){
$('.overview_table_header').click(function() { alert("clicked!"); });
});
</script>
solution2
1 2011-06-28 21:58:05
Put this part in your head tag of the page
<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>
solution3
0 2011-06-28 22:10:02
I don't know how exactly you have structured your code, but here is a structure that works:
<!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>
solution4
0 2011-06-28 22:12:22
With what you've provided us this should work fine, but I'm thinking that perhaps this table is also generated with javascript? If so you'll need to use the delegate method to assign listeners to these span tags
<script>
$('.overview_table_wrapper').delegate('.overview_table_header','click', function() {
alert("clicked!");
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.