0

ユーザーが動的テキストエリアを追加および削除できるページがあります。

ユーザーが「テキストエリアの追加」ボタンをクリックすると、新しいテキストエリアがロードされます。テキストエリアの上部には、太字、斜体、および下線ボタンを含む小さなメニューがあります。

ユーザーがこれらのボタンのいずれかをクリックすると、ボタンに対応するマークアップがテキスト領域に取り込まれます。

ただし、ユーザーが 2 番目のテキストエリアを追加すると、最初のテキストエリアのメニューは最初のテキストエリアへの出力を 2 倍にします。次にユーザーが 3 番目のテキストエリアを追加すると、最初のテキストエリアのメニューは出力を最初のテキストエリアに 3 倍にし、2 番目のエリアは出力を 2 倍にします...

それが理にかなっていることを願っています。追加のテキストエリアが追加されるたびに、この二重化を停止するにはどうすればよいですか?

これは完全なスクリプトです:

$('.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 は非推奨です。

解決した

上記のように、「article-menu」のクリック機能を「article-button」機能から移動し、次のように変更しました。

                $(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