标签在新窗口中提交表单，为什么？

Question

I have an issue here.

I've been using Tabs (widget jqueryUi).

All seems to work fine, but sometimes when I submit a form (inside the tab), the result comes in the window and not in the tabdiv.

I don't want that, the client has to keep in the websystem.

I already tried putting target="_self" in the form, but keep doing the issue sometimes.

var $tabs = $("#main").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close notext inline'>Remove Tab</span></li>",
    idPrefix: "tab_",
    add:function(e, ui){
        $tabs.tabs('select', '#' + ui.panel.id).show("blind");
        $j( "#list_tabs .ui-icon-close:last" ).on( "click", function(e, elemento) {
            var index = $( "li", $("#main").tabs() ).index( $( this ).parent() );
            $("#main").tabs( "remove", index );

            desativarItemSubmenu($('#' + $(this).parent()[0].id.replace('tab_', '')));
        });
    },

    select: function(event, ui){
        var id = $(ui.tab).parent()[0].id;
        if(id)
            ativarItemSubmenu($('#' + id.replace('tab_', '')));
    },
    cache:true,
    ajaxOptions: {async: false,cache: false}
})


$(".anchor").live("click", function(){
    if("<?php echo $this->session->userdata("cod_usuario") ?>" == ""){
        window.location.reload;
    }
    var url = this.rel;
    var tab_title = this.text;
    var tab_id = "tab_"+this.id;

    if(!$('#' + tab_id).length){
        if($('#main').tabs('length') > 3)
            $("#main").tabs("remove", 3);

        $("#main").tabs("add", url, tab_title);
        $("#list_tabs li:last").attr("id", tab_id); 
        $("#list_tabs li:last").addClass("active");
    }
    else{
        $('#main').tabs('option', 'selected', $('#' + tab_id).index());
    }
})

// Remove a tab clicando no "x" (remove tab by click on "x")
$( "#main span.ui-icon-close" ).live( "click", function() {
    var index = $( "li", $("#main").tabs() ).index( $( this ).parent() );
    $("#main").tabs( "remove", index );
});

Answer 1

I am not fully confident about this answer, but if not the solution then perhaps it will give you ideas that could lead to the solution.

It appears that you are changing the ID attribute of tabs on the fly. When you change an element's ID, you remove it from the DOM -- or rather, you re-inject it as a new element into the DOM. Therefore, any javascript that was previously bound to that element is no longer bound. Since you are using jQuery UI tabs, the changed element may stop being a tab.

This could cause the type of problem that you are describing.

Solution: instead of changing the tab ID, refactor your code to use classes that you add/remove.

As a general rule, use great caution when changing IDs on the fly.