Stuck on selecting a span with multiple classes

Stuck on selecting a span with multiple classes

   

$("span#tak_box").click(function() {
alert("hi");
});



   <div class="tak_content_right">
      <span id="test" class="tak_box tak_box_col_1 tak_box_row_1">img</span>
      <span class="tak_box tak_box_col_2 tak_box_row_1">2</span>
      <span class="tak_box tak_box_col_3 tak_box_row_1">3</span>
      <span class="tak_box tak_box_col_4 tak_box_row_1">4</span>
      <span class="tak_box tak_box_col_1 tak_box_row_2">1</span>
      <span class="tak_box tak_box_col_2 tak_box_row_2">2</span>
      <span class="tak_box tak_box_col_3 tak_box_row_2">3</span>
      <span class="tak_box tak_box_col_4 tak_box_row_2">4</span>
      <span class="tak_box tak_box_col_1 tak_box_row_3">1</span>
      <span class="tak_box tak_box_col_2 tak_box_row_3">2</span>
      <span class="tak_box tak_box_col_3 tak_box_row_3">3</span>
      <span class="tak_box tak_box_col_4 tak_box_row_3">4</span>
   </div>



I replaced the .hover to .click to test b/c of it not working properly. The markup is loaded to a div on click of a link , everything loads fine, but .click and/or any events dont seem to work on the #tak_box.

The Event code is inside the document).ready with other code that has worked/still works flawlessly. This is inside a .js file included by the index.php and not the ajax request

Thanks in advanced for the help, this is an ongoing quest for knowledge and I appreciate you helping me with specific tasks while i learn the language as a whole in my off time.