Question

非常感谢阅读，希望有人有个建议。

请查看网站http://epal-rodop.ser.sch.gr/demo/index.html 它使用Adobe / Spry的HTMLpanel来执行简单的ajax页面请求例如，当您单击菜单链接时（在右侧） ----------

编辑（抱歉，菜单在左侧）

它带来你通过ajax询问的页面并填充div容器。该页面包含一个SPRY选项卡式面板（javascript），工作正常我正在尝试检测选项卡式面板选项卡上的单击事件（单击选项卡将显示警告框））（按下链接TEST）
我有以下代码（Jquery和SPRY组合）：

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

并在通过ajax到div的页面中我有以下代码

<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>

.on()调用如果您单击NEXT到选项卡式面板空间并IN BETWEEN面板空间（2px距离！）但不在面板标题上，但是选择器包含ul和li所在的实际面板标题存在。我尝试了几种组合（给li，ul等提供ID但没有效果）。

非常感谢任何可能有助于解决问题的想法。

Answer 1

您的脚本实际上正常运行。问题在于，如果您单击实际div中的，则只会触发警报。尝试一下，你会发现它有效。单击选项卡旁边的空白区域，您将看到警报。

您实际需要做的是将点击功能设置为在.TabbedPanelsTab课程上触发，因为当用户点击实际标签时会触发。

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

另外，我建议使用jquery UI中已存在的tabs小部件，而不是自己滚动。

Answer 2

要扩展scott.korin的答案（有效），您还可以提高此脚本的效率（假设您的元素#TabbedPanels1始终存在：

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

.on（）jquery选择器没有触发！包括链接

编辑（抱歉，菜单在左侧）

2 个答案: