탭이 새 창에서 양식을 제출하는 이유는 무엇입니까?

Question

여기에 문제가 있습니다.

저는 Tabs (위젯 jqueryUi)을 사용하고 있습니다.

모두 제대로 작동하는 것처럼 보일 수도 있지만 때로는 양식 (Tab 내부)을 제출할 때 결과가 창에 나타나며 tabdiv에는 나타나지 않습니다.

나는 그것을 원하지 않는다. 클라이언트는 웹 시스템에 있어야한다.

나는 이미 target="_self"을 양식에 넣으려고했지만 때때로 문제가 계속 발생합니다.

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

나는이 답변에 대해 완전히 확신하지는 않지만 해결책이 아니라면 해결 방법으로 이어질 수있는 아이디어를 제공 할 것입니다.

즉석에서 탭의 ID 속성을 변경하는 것처럼 보입니다. 요소의 ID를 변경하면 DOM에서 해당 요소를 제거하거나 새로운 요소로 다시 DOM에 삽입합니다. 따라서 이전에 해당 요소에 바인딩 된 모든 자바 스크립트는 더 이상 바인딩되지 않습니다. jQuery UI 탭을 사용하기 때문에 변경된 요소가 탭이되지 않을 수 있습니다.

설명하는 유형의 문제가 발생할 수 있습니다.

해결책 : 탭 ID를 변경하는 대신 추가/제거하는 클래스를 사용하도록 코드를 리팩터링하십시오.

일반적으로 ID를 바꿀 때주의해서 사용하십시오.