0

我使用选项卡创建 UI。选项卡都包含单独的表单。如果我单击选项卡，则会调用所有表单保存功能。例如，假设我填写第一个选项卡表单，然后单击第二个选项卡。然后我刷新页面然后我单击第一个选项卡。数据未保存。但是在我填写第一个选项卡后，然后连续单击第二个和第三个选项卡并刷新第三个选项卡表单上的页面，然后单击第一个选项卡，现在数据已保存。我的问题是功能不是立即调用单击吗？

 $(".tab").tabs({
                selected: 0,
                select: function(e, ui) {

                        Firsttabvalue(arraytest);
                        Secondtabvalue(arraytest);
                        Thirdtabvalue(arraytest);

                        return true;

                }

            });
4

1 回答 1

1

我假设您在应用程序中使用 jQueryUI 选项卡（因为您没有指定您使用的确切插件）。如果这是真的，那么如果您查看jQueryUI API页面，您会发现选项卡没有事件“选择”，只有事件“激活”。

编辑：您可以使用该事件初始化选项卡：

$( ".selector" ).tabs({
   activate: function( event, ui ) {}
});

或者稍后绑定事件：

$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

更多编辑：我为您创建了简单的 JSFiddle：http: //jsfiddle.net/Bqkst/。和这里的代码：

HTML

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>

​</p>

JS：

$( "#tabs" ).tabs({
   activate: function( event, ui ) {
       alert( "tab changed" )
   }
});​

每次单击选项卡时都会触发警报！

于 2012-12-07T08:15:29.823 回答