탭을 실현하십시오! 어떻게 JQuery와 dinamically 생성 된 탭의 이름을 바꾸려면?

Question

나는 당신이 나를 도울 수 있기를 바랍니다. 내가 materializecss 프레임 워크의 "탭"(탭)이라는 요소를 사용하고 있지만 사용자가 다음과 같은 특정 작업을 수행 할 수 있도록 javascript로 구성합니다. 1. 새 탭을 추가합니다. 2. 기존 탭 또는 추가 된 탭의 이름을 편집하십시오.

내가 이미 가지고있는 코드 아래에 표시됩니다 : 는 1. "+"버튼을 클릭하여 새 탭을 추가

$("#Tab1").dblclick(function() { 
 
       var texto = $("#Tab1").text(); 
 
     $("#Tab1").remove(); 
 
     $("#inputTab1").attr("type", "text"); 
 
     $("#inputTab1").val(texto); 
 
     $("#inputTab1").focus(); 
 
}); 
 

 
$('#inputTab1').on('keyup', function(e) { 
 
    if(e.keyCode === 13) { 
 
      
 
     var input1 = $(this).val(); 
 
     
 
     $("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 + '</a>'); 
 
     
 
     $("#inputTab1").val(""); 
 
     
 
     $("#inputTab1").attr("type", "hidden"); 
 
     
 
     
 
     $("#Tab1").dblclick(function() { 
 
     
 
      var texto = $("#Tab1").text(); 
 
      $("#Tab1").remove(); 
 
      $("#inputTab1").attr("type", "text"); 
 
      $("#inputTab1").val(texto); 
 
      $("#inputTab1").focus(); 
 
     }); 
 
    } 
 
}); 
 

 

 
function addNew(){ 
 
    $(".pestanas").each(function(){ 
 
     $(this).removeClass('active'); 
 
    }); 
 
    $(".contenidos").each(function(){ 
 
     $(this).removeClass('active').css('display','none'); 
 
    
 
    }) 
 
    var id = Math.floor((Math.random() * 10000) + 1); 
 
    var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab'+id+'" href="#test'+id+'">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>'; 
 
    var conte = '<div id="test'+id+'" class="col s12 contenidos active">Text New Tab '+id+'</div>'; 
 
    $("#tabControl").before(pesta); 
 
    $("#tabs").after(conte); 
 
    $('ul.tabs').tabs(); 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
<div class="row"> 
 
    <div class="col s12" id="tabs"> 
 
     <ul class="tabs"> 
 
     <li class="tab col s3" id="first"><a class="pestanas active" id="Tab1" href="#test1">name</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="new name"/></li> 
 
     <li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li> 
 
     <li class="tab col s3" id="tabControl"><a id="control" onClick="addNew()" href="javascript:void(0)">+</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="test1" class="col s12"> 
 
     text first tab</div> 
 
    <div id="test2" class="col s12">text second tab</div> 
 
    </div>

이전 코드는 다음을 수행 . 2. 현재 이름을 두 번 클릭하면 첫 번째 탭의 이름을 편집 할 수 있습니다 ...

글쎄, 내가 원하는 것은 사용자가 새 탭을 추가 할 때 새로운 탭의 이름을 편집 할 수 있다는 것입니다. 탭뿐만 아니라 첫 번째 탭하지만 사용자가 추가 한 모든 탭 ... 나는 그것을 시도하고 지금까지 첫 번째 탭과 충돌을 생성하기 때문에 좋은 결과가 없었어요. 어떻게하면됩니까? 나에게 어떤 스크립트를 제공 할 수 있습니까? ... 아이디어는 새 탭이 추가 될 때마다 탭을 클릭하여 편집 할 수 있다는 것입니다 (예 : 첫 번째 탭). 당신이 이것으로 나를 도울 수 있다면 매우 감사 할 것입니다, 그것은 요즘 나를 미치게했습니다.

Answer 1

기본적으로 로직을 추출하여 새 탭에 이벤트 KeyUp 및 dblCkick을 적용해야합니다. 이 도움이

var applyDblEvent = function (identifier) { 
 
     $("#Tab" + identifier).dblclick(function() { 
 
      var $Tab = $("#Tab" + identifier); 
 
      var texto = $Tab.text(); 
 
      $Tab.remove(); 
 
      var $inputTab = $("#inputTab" + identifier); 
 
      $inputTab.attr("type", "text"); 
 
      $inputTab.val(texto); 
 
      $inputTab.focus(); 
 
     }); 
 
    }; 
 

 
    var applyKeyUpEvent = function (identifier) { 
 
     $('#inputTab' + identifier).on('keyup', function (e) { 
 
      if (e.keyCode === 13) { 
 
       var input = $(this).val(); 
 
       var $inputTab = $("#inputTab" + identifier); 
 
       $inputTab.before('<a class="active" id="Tab' + identifier + '" href="#test' + identifier + '">' + input + '</a>'); 
 
       $inputTab.val(""); 
 
       $inputTab.attr("type", "hidden"); 
 

 
       applyDblEvent(identifier); 
 
      } 
 
     }); 
 
    }; 
 

 
    $(document).ready(function() { 
 
     applyDblEvent(1); 
 
     applyKeyUpEvent(1); 
 
    }); 
 

 
    function addNew() { 
 
     $(".pestanas").each(function() { 
 
      $(this).removeClass('active'); 
 
     }); 
 
     $(".contenidos").each(function() { 
 
      $(this).removeClass('active').css('display', 'none'); 
 
     }); 
 

 
     var id = Math.floor((Math.random() * 10000) + 1); 
 
     var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab' + id + '" href="#test' + id + '">New Tab</a><input style="text-align: center; color: pink;" type="hidden" name="tab' + id + '" id="inputTab' + id + '" value="New Tab" /></li>'; 
 
     var conte = '<div id="test' + id + '" class="col s12 contenidos active">Text New Tab ' + id + '</div>'; 
 

 
     $("#tabControl").before(pesta); 
 
     $("#tabs").after(conte); 
 
     $('ul.tabs').tabs(); 
 

 
     setTimeout(function() { 
 
      $('ul.tabs').tabs('select_tab', 'test' + id); 
 
     }, 100); 
 

 
     applyDblEvent(id); 
 
     applyKeyUpEvent(id); 
 
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
<div class="row"> 
 
    <div class="col s12" id="tabs"> 
 
     <ul class="tabs"> 
 
     <li class="tab col s3" id="first"><a class="pestanas active" id="Tab1" href="#test1">name</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="new name"/></li> 
 
     <li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li> 
 
     <li class="tab col s3" id="tabControl"><a id="control" onClick="addNew()" href="javascript:void(0)">+</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="test1" class="col s12"> 
 
     text first tab</div> 
 
    <div id="test2" class="col s12">text second tab</div> 
 
    </div>

희망!