0

我有一个页面，允许用户添加和删除动态文本区域。

当用户单击“添加文本区域”按钮时，会加载一个新的文本区域。文本区域的顶部是一个小菜单，包括粗体、斜体和下划线按钮。

当用户单击这些按钮之一时，文本区域将填充对应于该按钮的标记。

但是，当用户添加第二个 textarea 时，第一个 textarea 的菜单会将输出加倍到第一个 textarea。如果用户然后添加第三个 textarea，则第一个 textarea 的菜单将输出增加三倍到第一个 textarea，第二个区域将输出增加一倍......

希望这是有道理的。每次添加额外的文本区域时，如何阻止这种加倍？

这是完整的脚本：

$('.article-button').click( function() {
    var target = '#about-elements';
    var button_type = $(this).attr('id');
    var id = new Date().getTime();
    var right_id = (new Date().getTime())+1;
    var get_icons = appendIcons(id);
    var menu = $.fn.menuOption();
    var out = false;

    if(button_type == 'about-textarea') {
        var out = '<div id="' + id + '" class="sortable-div"><label>Paragraph</label><div class="menu-option" rel="menu_' + id + '">' + menu + '</div><textarea id="element_' + id + '" class="about-textarea" name="element_' + id + '[]" /></textarea>';
    }
    else
        return false;                   

    if(out != false) {
        var out = out += get_icons;
        var l_out = out + '</div>';
        $(l_out).css('display', 'none').appendTo(target).fadeIn(500);
        $('.field-option').click(function() {
            var link_id = $(this).attr('rel');
            var type = $(this).attr('class').replace('field-option ', '');
            $.fn.fieldOption(type, link_id);
        });
        $('.article-menu').click(function() {
            var parent_id = $(this).closest('.menu-option').attr('rel').replace('menu_', '');
            var type = $(this).attr('rel');
            $.fn.menuOutput(type, parent_id);
        });
    }
    $(".droppable").droppable({ accept: ".draggable", activeClass: "drop-list-hover", drop: function(event, ui) {
        var drag_id = ($(ui.draggable).attr("id")).replace('upload_', '');
        var drag_src = ($(ui.draggable).attr("src"));
        var drop_id = $(this).attr('rel');
        var new_img = '<img src="' + drag_src + '" />';

        $('input[id=img_' + drop_id + ']').val(drag_id);
        $('div.sortable [id=' + drop_id + '] div.droppable').hide().html(new_img).fadeIn(500);
        }
    });                                             
});

以及 fieldOption 和 menuOutput 函数：

$.fn.fieldOption = function(type, link_id) {
    var list_id = 'div[id=' + link_id + ']';

    if(type == "remove") {
        $('#dialog-confirm').dialog({
            resizable: false,
            height:140,
            modal: true,
            draggable: false,
            buttons: {
                "Remove field": function() {
                    $(this).dialog('close');
                    $(list_id).css('min-height', '0');
                    $(list_id).animate({
                        opacity: 0,
                        height: '0px'
                        }, 800, 'swing', function() {
                            $(list_id).remove();
                    });                                         
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            }
        });
    };
};

$.fn.menuOption = function() {
    var menu = '<ul class="article-buttons">' +
        '<li><a title="Bold" class="article-menu bold" href="javascript:void(0);" rel="bold"><img src="images/icons/article/article-menu-bold.png" width="29" height="29" /></a></li>' +
        '<li><a title="Italic" class="article-menu italic" href="javascript:void(0);" rel="italic"><img src="images/icons/article/article-menu-italic.png" width="29" height="29" /></a></li>' +
        '<li><a title="Underline" class="article-menu underline" href="javascript:void(0);" rel="underline"><img src="images/icons/article/article-menu-underline.png" width="29" height="29" /></a></li>' +
        '</ul>';
    return menu;
}

$.fn.menuOutput = function(type, parent_id) {
    if(type == 'bold') {
        var str = '[bold]...[/bold]';
    }
    else if(type == 'italic') {
        var str = '[italic]...[/italic]';
    }
    else if(type == 'underline') {
        var str = '[underline]...[/underline]';
    }
    $('textarea[id=element_' +  parent_id + ']').insertAtCaret(str);
}

快速更新：

到目前为止，我发现的问题是文章菜单单击功能在文章按钮单击功能内。

$('.article-button').click( function() {
.....
    $('.article-menu').click(function() {
        var parent_id = $(this).closest('.menu-option').attr('rel').replace('menu_', '');
        var type = $(this).attr('rel');
        $.fn.menuOutput(type, parent_id);
    });
.....
});

当我将这部分移到主函数之外并将'click（function（）'更改为'on（'click'，function（）'......什么都没有。但是，如果我将.on更改为.live，一切似乎都很完美. Live 已被弃用。

解决了

如上所述，我将点击功能上的“文章菜单”从“文章按钮”功能中移出，并将其更改为：

                $(document.body).on('click', '.article-menu', function() {
                    var parent_id = $(this).parent().parent().parent().attr('rel').replace('menu_', '');
                    var menu_type = $(this).attr('rel');
                    $.fn.menuOutput(menu_type, parent_id);
                });
4

0 回答 0