javascript - jQuery UI 无法在事件函数之外获取选定的选项卡-6ren

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

转载作者：行者123 更新时间：2023-11-28 19:35:12

25

4

我有以下 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);

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

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

我也尝试过使用:

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

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

编辑:使用 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() 函数内多次绑定(bind)选项卡和绑定(bind)。相反，您可以在 document.ready 或 $(function(){ ..}); 中绑定(bind)一次。要将 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
}

并从 anchor 标记中删除 onclick="displayItems()"。

<强> Demo

关于javascript - jQuery UI 无法在事件函数之外获取选定的选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26014200/

25

4

0

文章推荐： Javascript 对象文字，无法设置属性

文章推荐： python - 字符串在python中拆分为单独的字符串

文章推荐： python - 在 Python : 中加入两个列表

文章推荐： javascript - 在一个 Mongoskin 查询中推送多个数组

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

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