Question

我有一个jQuery UI选项卡控件，第一次打开选项卡时我可以添加一个事件处理程序（在$().ready()中）并且它可以正常工作。

如果我切换到另一个标签，然后再切换回来，那么我就是在维护事件处理程序。我可以选择每次添加它，每次添加时都会触发一次，或者每次都添加，但只有在第一次打开标签时才会触发。

选项1 - 两个事件处理程序

$(document).on("change", "#chkIsBreak", function () { alert("hi");});

第一次加载选项卡时会导致事件触发，但每次我切换回选项卡时都会添加相同的事件处理程序，因此每次都会有一个额外的警报。

如果我用jQuery._data($(document).get(0), "events");查看事件，我可以看到事件已被添加两次。

选项2 - 一个事件处理程序，仅在第一次添加时才有效。

$("#chkIsBreak").on("change", function () { alert("hi");});

第一次打开选项卡时工作正常，但是当切换选项卡然后再返回时，事件根本不会触发。

如果我用jQuery._data($("#chkIsBreak").get(0), "events");查看该事件，我可以看到该事件已被添加，但除非是第一次打开该标签，否则不会触发该事件。

有什么建议吗？我可以使用选项1并检查jQuery._data()，但这应该是内部jQuery数据。在这做什么是正确的？

Answer 1

您可以使用beforeActivate和beforeLoad事件。

＆＃13;

$(function() {
  $("#tabs").tabs({
    beforeActivate: function(event, ui) {
      alert("hi");
    }
  });
});

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna
      ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
      Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

＆＃13;

jQuery UI选项卡 - 如果选项卡离开并切换回

1 个答案: