jQuery UI可以'无法在事件功能之外获取所选选项卡

jQuery UI can't get selected tab outside of event function

本文关键字：功能 获取 选项 事件 可以 UI jQuery      更新时间：2023-09-26

我有以下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函数，它做它应该做的事情，当你点击issued选项卡等时，它会返回"issued"。

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

第一个alert正确地返回"issued"或选择了任何选项卡，但第二个alert返回[object htmldivelement]。我不知道为什么它没有返回相同的值。我做错了什么？

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

我也尝试过使用：

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

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

EDIT:使用Bhushan Kawadkar的答案，我成功了，我还必须使用toString()将issued更改为字符串，才能正确地将其传递给Ajax函数。

我还遵循了T J的建议，从我的链接中删除了onClick事件，因为它们是不需要的，因为每次单击新选项卡时都会调用该函数。

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

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()"。

演示

  • 您无法访问外部值的原因是将其存储在局部变量中
  • 你的小提琴不起作用的原因是
    • 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>

相关文章：