.on() jquery selector not firing! Link included

Question

Many thanks for reading , hope someone has a suggestion.

Please, look at the site http://epal-rodop.ser.sch.gr/demo/index.html It uses the HTMLpanel from Adobe/Spry to perform a simple ajax page request.
For example when you click a menu link (on the right) -–––––––––

Edit ( sorry, menu is on the left)

it brings the page you ask through ajax and fills a div container. The page contains a SPRY tabbed panel (javascript) and works ok.
I am trying to detect the click event on the tabbed panel tab (clicking the tab will bring the alert box)) (press the link TEST)
I have the following code (Jquery and SPRY combined) :

$(document).ready(function(){
    $(document).on("click","#TabbedPanels1",function (event){
        alert("in");
    });
});

and in the page that come through ajax to the div i have the following code

<div id="TabbedPanels1" class="TabbedPanels" style="margin-left:20px; ">

  <ul  class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0">Test</li>
    <li class="TabbedPanelsTab" tabindex="0">test2</li>
  </ul>

  <div class="TabbedPanelsContentGroup" style="height: auto" >
    <div class="TabbedPanelsContent">
      <p style="font-size:13px; text-align:justify">Data</p>
    </div>
    <div class="TabbedPanelsContent">
      <p><span style="font-size:13px; text-align:justify">Data </span></p>  
    </div>
  </div>
</div>

The .on() call works if you click NEXT to the tabbed panel space and IN BETWEEN the panels space (2px distance!) but not on the panel title, although the selector contains the ul and li where the actual panel titles exist. I have tried several combination (giving ids to li, ul etc but none works).

Many thanks for any ideas that might help solve the problem.

Answer 1

Your script is actually working correctly. The problem is that as written, the alert will only be fired if you click in the actual div. Try it, you will see it work. Click in the white space next to the tabs and you will see the alert.

What you actually need to do is set the click function to fire on the .TabbedPanelsTab class, since that will fire when a user clicks on the actual tabs.

$(document).on("click",".TabbedPanelsTab",function (event){
    alert("in");
});

Also, I would suggest using the tabs widget that already exists in jquery UI instead of rolling your own.

Answer 2

To expand on scott.korin's answer (which is valid), you can also improve the eficciency of this script (assuming that your element #TabbedPanels1 is always present:

$('#TabbedPanels1').on("click",".TabbedPanelsTab",function (event){
    alert("in");
});