Question

我有一个页面，允许用户添加和删除动态textareas。

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

当用户点击其中一个按钮时，textarea会填充对应按钮的标记。

然而，当用户添加第二个textarea时，第一个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似乎一切似乎为了完美地工作。虽然现场已被弃用。

解决

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

                $(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);
                });

Jquery动态textarea菜单

0 个答案: