jQuery UI 无法在事件函数之外获取选定的选项卡答案

【问题标题】：jQuery UI can't get selected tab outside of event functionjQuery UI 无法在事件函数之外获取选定的选项卡
【发布时间】：2023-03-24 21:15:02
【问题描述】：

我有以下 HTML，我已将 Jquery 选项卡应用于：

<div id="lineitems">

  <ul>
    <li><a href="#not-issued" onClick="displayItems()">Not Issued</a></li>
    <li><a href="#issued" onClick="displayItems()">Issued</a></li>
    <li><a href="#search" onClick="displayItems()">Search</a></li>
  </ul>

<div id="not-issued">Not Issued Items</div>
<div id="issued">Issued Items</div>
<div id="search">Search for items</div>

</div>

我有以下 jQuery 函数，它可以做它应该做的事情，当你点击已发布的选项卡等时，它将返回“已发布”。

$("#lineitems").tabs({
  beforeActivate: function (event, ui) {
    var issued = ui.newPanel.attr('id'); //Get newly selected tab
    alert(issued);
  }
});

alert(issued);

第一个alert 正确返回“已发布”或选择的任何选项卡，但是第二个alert 返回[object htmldivelement]。我不确定为什么它没有返回相同的值。我做错了什么？

为了将其置于上下文中，我试图获取所选选项卡的值，以便我可以相应地更改提交按钮的值，然后将（所选选项卡的）值传递给 ajax 函数。

我也尝试过使用：

$("#lineitems").bind("tabsactivate", function(event, ui) {
    issued = ui.newTab.index();
    alert(issued);
});

但我又遇到了同样的问题，即发出的变量在函数之外返回空。

编辑：使用 Bhushan Kawadkar 的回答我得到了它的工作，我还必须使用 toString() 将 issued 更改为字符串以正确地将其传递给 Ajax 函数。

我也按照 T J 的建议从我的链接中删除了 onClick 事件，因为它们不是必需的，因为每次单击新标签时都会调用该函数。

【问题讨论】：

jQuery UI Tabs Get Currently Selected Tab Index 的可能重复项
我确实尝试了关于该问题的建议，但我遇到了同样的问题，仍然无法访问函数外的变量

标签： javascript jquery html jquery-ui jquery-ui-tabs

【解决方案1】：

您必须在函数外部声明变量才能在外部使用它，见下面代码

var issued = '';

$("#lineitems").tabs({
  beforeActivate: function (event, ui) {
    issued = ui.newPanel.attr('id'); //Get newly selected tab
    alert(issued);
  }
});

alert(issued);

编辑 - 您在displayItems() 函数中多次绑定tabs 和bind。取而代之的是，您可以在 document.ready 或 $(function(){ ..}); 内绑定一次。要将issued 值传递给displayItems 函数，请在tabs beforeActivate 事件中调用它。

jQuery :

$(function() { //This is in the <head> tag on my HTML
    $( "#lineitems" ).tabs();

    //Both of these methods work, but only inside the function
    $("#lineitems").bind("tabsactivate", function(event, ui) {
        var issued = ui.newTab.index();
        alert("bind "+issued);
    }); 

    $("#lineitems").tabs({
      beforeActivate: function (event, ui) {
        var issued = ui.newPanel.attr('id'); //Get newly selected tab
        alert("tabs "+issued);
        displayItems(issued);
      }
    });
});

function displayItems(issued)
{
    alert("display "+issued);
    //lineItems(job, issued); call to Ajax function
}

并从锚标签中删除onclick="displayItems()"。

Demo

【讨论】：

您何时显示第二个警报？这是在加载页面吗？
每当用户选择一个新标签时我都会显示它，我调用每个标签的 onClick 函数
你能发一个 jsfiddle 链接吗？
这是一个 JSfiddle 链接jSfiddle。出于某种原因，alert 不起作用，但你明白了
“在标签事件中调用它”？什么标签事件..？

【解决方案2】：

您无法访问外部值的原因是因为您是将其存储在局部变量中。
你的fiddle 不工作的原因是因为
- 小提琴设置为运行onload，因此displayItems 将被包裹在load 事件处理程序中，因此外部无法访问
- 以下var job = document.getElementById('joblist').value; 抛出错误，因为id joblist 没有元素。

理想情况下，您的代码应该是：

$("#lineitems").tabs({
    beforeActivate: function (event, ui) {
    },
    activate: function (event, ui) {
        issued = ui.newTab.index(); // issued is global so you can access it outside
        alert(issued);
    }
});

<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<div id="lineitems">
    <ul>
        <li><a href="#not-issued">Not Issued</a>

        </li>
        <li><a href="#issued">Issued</a>

        </li>
        <li><a href="#search">Search</a>

        </li>
    </ul>
    <div id="not-issued">Not Issued Items</div>
    <div id="issued">Issued Items</div>
    <div id="search">Search for items</div>
</div>

【讨论】：