javascript - jQuery UI 选项卡 - 如果选项卡离开并切换回，则不会添加事件处理程序

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您可以使用的事件。

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

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