2

我已经动态创建了 jquery 选项卡。我想重命名选项卡。当我单击选定的选项卡时。一个文本框出现在模糊上，它将文本框的值设置为选项卡。再次，当我尝试对另一个选项卡执行此操作时，它会重命名当前和早期选项卡。等等...

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]);
});
});​
4

2 回答 2

2

每次重命名时，您都在设置绑定事件。$(nameField).blur(function (){})实际上不会覆盖您以前的模糊，它只会附加功能。所以你需要在添加新功能之前解绑它。$(nameField).unbind('blur');

所以函数将是

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();
            });
        }
    });
}
于 2012-07-23T06:37:16.907 回答
2

使用一个而不是模糊。

$(nameField).blur(function ()

变成：

$(nameField).one('blur', function (){

http://jsfiddle.net/k44Wk/18/

于 2012-07-23T06:42:50.977 回答