1

Step 1: Tab 1 and Tab 2 are there from before.

Step 2: Double click on Tab 1 and get a option to rename tab heading.

Step 3: Double click on Tab 2 and get a option to rename tab heading.

Step 4: After adding new tabs by clicking on the + button, new tab is created but not getting the ooption to rename it, though new tab is generated with same class names and elements present in Tab 1 and Tab 2 which were not created dynamically.


        <div id="tabs">
            <ul class="nav nav-tabs">
                <li class="tab-txt active"><input class="txt_tab_head" type="text"/><a class="tabanchor" href="#contact_1" data-toggle="tab">Tab 1</a><span><i class="fa fa-close" style="font-size:12px"></i></span></li>              
                <li class="tab-txt"><input class="txt_tab_head" type="text"/><a class="tabanchor" href="#contact_2" data-toggle="tab">Tab 2</a><span><i class="fa fa-close" style="font-size:12px"></i></span></li>                 
                <li><a  href="#" class="add-contact" data-toggle="tab"><i class="fa fa-plus-circle" style="font-size:15px"></i></a></li>                
            </ul>
        </div>

            <div class="tab-content">
                <div class="tab-pane active" id="contact_1"><!--Contents of : Tab 1-->                  
                    <h1>Contents of Tab 1<h1>                   
                </div>                      

                <div class="tab-pane fade" id="contact_2"><!--Contents of : Tab 2-->                            
                    <h1>Contents of Tab 2<h1>
                </div>
            </div>
//Add tab and content
$('.add-contact').click(function(e) {
  e.preventDefault();
  var id = $(".nav-tabs").children().length; 
  $(this).closest('li').before('<li class="tab-txt"><input class="txt_tab_head" type="text"/><a href="#contact_' + id + '">New Tab ' + id + '</a><span><i class="fa fa-close" style="font-size:12px"></i></span></li>');
  $('.tab-content').append('<div class="tab-pane fade" id="contact_' + id + '"><h3>Contents of Tab ' + id +'</h3></div>');
});


//Renaming tabs
$('.tab-txt').on('dblclick',function(){
    $(this).find('input').toggle().val($(this).find('a').html()).focus();
    $(this).find('a').toggle();
});

$('.tab-txt').on('blur','input',function(){
    $(this).toggle();
    $(this).siblings('a').toggle().html($(this).val());
});


//Sorting Tabs
$( function() {
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
      axis: "x",
      stop: function() {
        tabs.tabs( "refresh" );
      }
    });
});
RajB009
  • 417
  • 2
  • 7
  • 19
  • The issue is that the element was not in existence when the event handler was created. Try this for attaching your event handlers: $(document).on(event, selector, handler). – Passersby Jan 14 '18 at 17:01

0 Answers0