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

Answer 1

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>