在Jquery中单击选项卡菜单上的项目后提交表单答案

【问题标题】：submitting the form after clicking the item on the tab menu in Jquery在Jquery中单击选项卡菜单上的项目后提交表单
【发布时间】：2012-03-02 22:47:45
【问题描述】：

示例在：http://jqueryui.com/demos/tabs/，我希望在单击 tab-2 菜单时提交表单。

以下是我的代码。但是，单击后表单不提交。

谁能帮帮我？非常感谢！

<script>
    $(function() {
        $( "#tabs" ).tabs();

        $('#tabs-2').click(function() {
            $('#target').submit();
        });
    });
</script>
<div id="tabs">
    <form id="target">
        <ul>
            <li><a href="#tabs-1">Tab-1</a></li>
            <li><a href="#tabs-2">Tab-2</a></li>
            <li><a href="#tabs-3">Tab-3</a></li>
        </ul>
        <div id="tabs-1">
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
    </form>

【问题讨论】：

标签： jquery-ui jquery jquery-plugins

【解决方案1】：

$(document).ready(function(){
    $('#tabs-2').click(function() {
        $('#target').submit();
    });
});

【讨论】：

是的，这应该可以解决您原始示例的问题，即您永远不会调用

【解决方案2】：

您可能会发现选项卡插件无论如何都阻止了单击的默认操作，并且没有调用您的单击事件。

您应该尝试挂钩tabselect 事件并使用ui.tab 来检查所选标签的href 属性是否为#tabs-2。

$("#tabs").bind("tabsselect", function(event, ui) {
    if(ui.tab.attr('href') == '#tabs-2') {
        $('#target').submit();
    }
});

或者您可以在创建选项卡时执行此操作：

$("#tabs").tabs({
   select: function(event, ui) {
        if(ui.tab.attr('href') == '#tabs-2') {
            $('#target').submit();
        }
     }
});

您还可以使用ui.index 获取所选标签的零基索引，或使用ui.panel 获取该标签的选定内容div。随你喜欢！

【讨论】：

【解决方案3】：

我认为您需要为 Tab-2 定义 id，如此处所述。但在这里你指的是div id click。

<li><a href="#tabs-2" id="tab2">Tab-2</a></li>

$('#tabs2').click(function() {
    $('#target').submit();
});

【讨论】：