Question

I have created jquery tabs dynamically. I want to rename the tabs. When I click on selected tab. a text box appears on blur it sets the value of text box to the tab. And again when I tried to do this for another tab it renames the both the current and earlier tabs. and so on…

Live Demo on JS Fiddle

$(document).ready(function() {
$("#tabs").tabs({
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <p title='close' id='removeTab' style='cursor:pointer;display:inline'>x</p></li>"
});
});

$(function() {

    for (i=0; i<3; i++){
    var title = '<span id="a'+i+'">Tab.....  ' + i;
        var url = '#fragment-' + i;
        addTab(url, title, i);
    }
    var index =10;
    index++;
    $("#addTab").live('click', function() {
        index++;
        var title = '<span id="a'+index+'">Tab.....  ' + index;
        var url = '#fragment-' + index;
        addTab(url, title, index);

    });
function addTab(url, title, index) {

    $('#tabs').tabs("add", url, title, [index]);
    $('#a'+index).click(function(){
            var _current = '#a'+index 
            if($(_current ).parent().parent().hasClass('ui-tabs-selected')){
                $(_current).hide();
                $('#editTabName').stop(false, true).hide();
                var nameField = '#editTabName';
                $(nameField).css({
                        top: '12px',
                        left: $(this).parent().offset().left + 8+'px',
                        zIndex:100,
                        position:'absolute'
                    });
           $(nameField).val($(_current).html());
                $(nameField).show(50);
                $(nameField).focus();
                $(nameField).blur(function (){
                    alert(_current);
                    newName = $(nameField).val();
                    $(_current).html(newName);
                    $(nameField).hide();
                    $(_current).show();
                });
            }
        });
}


$('#removeTab').live('click', function() {
    var $tabs = $('#tabs').tabs();
    var selected = $tabs.tabs('option', 'selected');
    if(selected == -1)
        selected = $('p[id=removeTab]').index(this);
    $('#tabs').tabs("remove", [selected]);
});
});​

Answer 1

You are setting the bind event each time when you rename. $(nameField).blur(function (){}) won’t actually overwrite your previous blur, it will just append the functions. So you need to unbind it before adding the new function. $(nameField).unbind('blur');

So the function will be

function addTab(url, title, index) {
    $('#tabs').tabs("add", url, title, [index]);
    $('#a'+index).click(function(){
        var _current = '#a'+index;
        if($(_current ).parent().parent().hasClass('ui-tabs-selected')){
            $(_current).hide();
            $('#editTabName').stop(false, true).hide();
            var nameField = '#editTabName';
            $(nameField).css({
                    top: '12px',
                    left: $(this).parent().offset().left + 8+'px',
                    zIndex:100,
                    position:'absolute'
                });
            $(nameField).val($(_current).html());
            $(nameField).show(50);
            $(nameField).focus();
            $(nameField).unbind('blur');                
            $(nameField).blur(function (){
                alert(_current);
                newName = $(nameField).val();
                $(_current).html(newName);
                $(nameField).hide();
                $(_current).show();
            });
        }
    });
}