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

名前を変更するたびに bind イベントを設定しています。$(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

ぼかしの代わりに 1 つを使用します。

$(nameField).blur(function ()

になります：

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

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

于 2012-07-23T06:42:50.977 に答える