TABS and click reactions

TABS and click reactions

Hi all
Just developing a user interface for robot control on a windows machine. 
I'm using TABs from JQueryUI. For that I created a index.html containing the widget header with 3 TABS
- inndex.html (contains js)
- TAB0 is loaded from a static file called Panel.html (nearly empty)
- TAB2 is loaded from a static file called Map.html (nearly empty)
- TAB1 is loaded from a static file called Alarmlist.html (contains js)

After calling http://192.168.1.200:8080/Robbi/index.html with Chrome I get a proper working TAB site with the defined contents. TAB1 is shown by default.

Alarmlist has a button acknowledge and I defined a reaction to the browser console.
The key works proper after a new call of the index.html
after a TAB Change from TAB1 to TAB0 and back the key doesn't work at all, no output to the console!

herewith my sites
- index.html
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Robot user interface</title>
  6. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  7. <meta name="description" content="Robot user interface" />
  8. <meta name="author" content="Wolfgang Glück" />
  9. <meta name="editor" content="html-editor phase 5" />
  10. <link rel="icon" href="/static/icons/favicon-16x16.png" type="image/png">
  11. </head>

  13. <body>
  14. <div class="ui-widget">
  15.    <div     id="tabs"
  16.             class="ui-widget-header
  17.             ui-corner-top">

  19.        <ul>
  20.               <li><a href="Panel.html"> Panel</a></li>
  21.               <li><a href="Alarmlist.html"> Alarm list</a></li>
  22.               <li><a href="Map.html"> Map</a></li>
  23.        </ul>
  24.    </div>
  25. </div>

  27. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css">
  28. <script src="../static/js/jquery-1.12.0.min.js" type="text/javascript"></script>
  29. <script src="../static/js/jquery-ui.min.js" type="text/javascript"></script>
  30. <script src="../static/js/AlarmlistScripts.js" type="text/javascript"></script>
  31. <script type="text/javascript">
  32. $(document).ready(function(){
  33.          $('#tabs').tabs({active: 1});
  34. });
  35. </script>

  37. </body>
  38. </html>



-TAB1 Alarmlist
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Robot user interface</title>
  6. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  7. <meta name="description" content="Alarm list" />
  8. <meta name="author" content="Wolfgang Glück" />
  9. <meta name="editor" content="html-editor phase 5" />
  10. <link rel="icon" href="/static/icons/favicon-16x16.png" type="image/png">
  11. </head>

  13. <body>
  14. <div class="ui-widget-content
  15.      ui-state-default
  16.      ui-corner-top
  17.      ui-corner-bottom">
  18.       <div id="AlarmListHeader">
  19.              <table width="30%" border="0" bgcolor="#F0F0F0" cellpadding="0" cellspacing="2">
  20.              <tr>
  21.                   <td align="left" >
  22.                            <button id="acknowledge">Acknowledge</button>
  23.                   </td>

  25.                   <td width="20">
  26.                   </td>

  28.                   <td>Page:
  29.                   </td>

  31.                   <td align="center" id="actual">?actual
  32.                   </td>

  34.                   <td width="20">
  35.                   </td>

  37.                   <td>
  38.                        <button type="button" id="button4">first</button>
  39.                   </td>

  41.                   <td align="center">
  42.                        <button type="button" id="button2">&lt;</button>
  43.                   </td>

  45.                   <td align="center">
  46.                        <button type="button" id="button3">&gt;</button>
  47.                   </td>

  49.                   <td align="center">
  50.                        <button type="button" id="button5">last</button>
  51.                   </td>

  53.                   <td width="20">
  54.                   </td>

  56.                   <td align="center" id="last">?last
  57.                   </td>

  59.              </tr>
  60.              </table>
  61.       </div>

  63.       <div id="AlarmListBody">
  64.              <table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="2">
  65.              <caption><h2>Robot alarm list</h2></caption>
  66.              <tr>
  67.                   <td width="130" align="left" bgcolor="#A0A0A0" id="0.1">Date / Time</td>
  68.                   <td width="420" align="left" bgcolor="#A0A0A0" id="0.2">Message</td>
  69.                   <td width="20" align="right" bgcolor="#A0A0A0" id="0.3">Limit</td>
  70.                   <td width="20" align="right" bgcolor="#A0A0A0" id="0.4">Value</td>
  71.                   <td width="10" align="left" bgcolor="#A0A0A0" id="0.5">Dim.</td>
  72.                   <td width="10" align="center" bgcolor="#A0A0A0" id="0.6">C/G</td>
  73.                   <td width="10" align="center" bgcolor="#A0A0A0" id="0.7">A</td>
  74.              </tr>
  75.              <tr>
  76.                   <td id="1.1">&nbsp;</td>
  77.                   <td id="1.2">&nbsp;</td>
  78.                   <td align="right" id="1.3">&nbsp;</td>
  79.                   <td align="right" id="1.4">&nbsp;</td>
  80.                   <td align="left" id="1.5">&nbsp;</td>
  81.                   <td align="center" id="1.6">&nbsp;</td>
  82.                   <td align="center" id="1.7">&nbsp;</td>
  83.              </tr>
  84.              <tr>
  85.                   <td bgcolor="#F0F0F0" id="2.1">&nbsp;</td>
  86.                   <td bgcolor="#F0F0F0" id="2.2">&nbsp;</td>
  87.                   <td align="right" bgcolor="#F0F0F0" id="2.3">&nbsp;</td>
  88.                   <td align="right" bgcolor="#F0F0F0" id="2.4">&nbsp;</td>
  89.                   <td align="left" bgcolor="#F0F0F0" id="2.5">&nbsp;</td>
  90.                   <td align="center" bgcolor="#F0F0F0" id="2.6">&nbsp;</td>
  91.                   <td align="center" bgcolor="#F0F0F0" id="2.7">&nbsp;</td>
  92.              </tr>
  93.  
  94.              </table>
  95.       </div>
  96. </div>

  98. <script src="../static/js/AlarmlistScripts.js" type="text/javascript"></script>

  100. </body>
  101. </html>

AlarmlistScripts
  2. $(document).ready(function(){
  3.          $('#acknowledge').button()
  4.                           .click(function(event) {
  5.                                  console.log("acknowledge geclickt.");
  6.                           });
  7.          $('#button2').click(function() { window.location.href = "/Robbi/2"; });
  8.          $('#button3').click(function() { window.location.href = "/Robbi/3"; });
  9.          $('#button4').click(function() { window.location.href = "/Robbi/4"; });
  10.          $('#button5').click(function() { window.location.href = "/Robbi/5"; });
  11. });



What did I wrong?
Thanks for your support