Question

我有以下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函数可以执行它应该执行的操作，它将返回＆＃34;已发布＆＃34;当你点击发布的标签等时。

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

alert(issued);

第一个alert正确返回＆＃34;已发出＆＃34;或者选择了任何标签，但第二个alert会返回[object htmldivelement]。我不确定为什么它没有返回相同的值。我做错了什么？

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

我也尝试过使用：

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

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

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

我也遵循了T J的建议并从我的链接中删除了onClick事件，因为无论如何都会在每次点击新标签时调用该函数。

Answer 1

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

var issued = '';

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

alert(issued);

修改 - 您在tabs函数内多次绑定bind和displayItems()。您可以在document.ready或$(function(){ ..});内绑定一次，而不是这样。要将issued值传递给displayItems函数，请在激活事件之前在tabs内调用它。

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

Answer 2

您无法获取外部价值的原因是因为您的原因将其存储在本地变量中。
你的fiddle无效的原因是因为
- 小提琴设置为onload，因此displayItems将被包裹在load事件处理程序中，因此无法在
- 以下var job = document.getElementById('joblist').value;引发错误，因为id joblist没有任何遗嘱。

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

＆＃13;

$("#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);
    }
});

＆＃13;

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

＆＃13;

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

2 个答案: