Question

我有以下html：

<div id="tabsuseradmin" class="tabui">
  <ul>
    <li><a href="#tabs-1ua">Add Users</a></li>
     <li><a href="#tabs-2ua">Delete Users</a></li>
  </ul>
  <div id="tabs-1ua">
    <div>
    </div>
  </div>
  <div id="tabs-2ua">
    <div>
     </div>
  </div>
</div>

以及我的js文件中的以下文件就绪函数：

$('.tabui').tabs({
    activate: function (event, ui) {
        $.ajax({
            cache: false,
            url: "/Session/Index/",
            success: function (result) {
                if (result.length == 0) {
                    window.location.href = '/Home/Index/'
                }
            }
        });
    }
});


$("#tabs-1ua").tabs({
    activate: function (event, ui) {
        alert("User add tab has been clicked.");
    }
});

上面，您可以看到我正在尝试使用类tabui指定所有选项卡选项的行为（这很好）以及单个选项卡的特定行为。此特定操作不起作用（警报消息不会出现，并且警报上的断点不会被命中）。我该怎么做才能解决这个问题？谢谢。

Answer 1

根据您的评论，您希望这样做：

https://jsfiddle.net/Twisty/eoa9tafm/

$(function() {
  $('.tabui').tabs({
    activate: function(event, ui) {
      $.ajax({
        cache: false,
        url: "/Session/Index/",
        success: function(result) {
          if (result.length == 0) {
            window.location.href = '/Home/Index/'
          }
        }
      });
    }
  });

  $("a[href='#tabs-1ua']").click(function(event, ui) {
    alert("User add tab has been clicked.");
  });
});

Answer 2

$("a[href='#tabs-1ua']").on('click', function() {
  console.log("User tab clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<div id="tabsuseradmin" class="tabui">
  <ul>
    <li><a href="#tabs-1ua">Add Users</a></li>
     <li><a href="#tabs-2ua">Delete Users</a></li>
  </ul>
  <div id="tabs-1ua">
    <div>
    </div>
  </div>
  <div id="tabs-2ua">
    <div>
     </div>
  </div>
</div>

如何捕获特定jQueryUI选项卡的激活？

2 个答案: