0

Jqueryを使用して、セクションにサブセクションを追加し、サブセクションにアイテムを追加しようとしています

サブセクションのすべてのアイテムは、その親に固有です。近いことをしましたが、新しく追加されたサブセクションの下にアイテムを追加できません。

                $(function() {
        var scntDiv = $('#subRootItems');
        var i = $('#subRootItems').size() + 1;

        $('#addSubFOODItem').live('click', function() {
                $('<div class="menuItemContainer"><input type="text" value="" placeholder="Item Name" name="foodItemName'+ i +'" class="itemFieldEdit"><div class="itemPrice"><input type="text" value="" placeholder="Price" name="foodItemName' + i +'" class="priceInput"></div><div class="actionItemBox"><div class="homeLBoxRightEdit" id="remItem"><i class="icon-trash" id="remSubFoodItem">REMOVE ITEM</i></div></div></div>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remSubFoodItem').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('.menuItemContainer').remove();
                        i--;
                }
                return false;
        });
    });
    $(function() {
        var scntDiv = $('#menuSubSection');
        var i = $('#menuSubSection').size() + 1;

        $('#addSubSection').live('click', function() {
                $('<div class="menuSubCategoryTitle"><div class="menuCategoryTitle"><div style="float: left;"><i class="icon-menu" style="margin-right: 5px;"></i>Vegetarian</div><div class="menuEditIcons"><a href="#"><i class="icon-plus-1" style="margin-right: 5px;"></i></a><a href="#"><i class="icon-trash" id="delSubSection">REMOVE SUB SECTION</i></a></div></div><div class="addMenuBtns"><div class="visualMenuBtn" id="addSubFOODItem"><i class="icon-food-1" style="margin-right: 5px;"></i>New Food-Item</div></div></div><div id="subRootItems"></div><div class="clear"></div>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#delSubSection').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('.menuSubCategoryTitle').remove();
                        i--;
                }
                return false;
        });
    });

ご覧ください：http://jsfiddle.net/AnmQy/

前もって感謝します ：）

4

2 に答える 2

2

$('#addSubFOODItem').live('click', function() { .... });コードを以下のコードに置き換えて、要件を満たしているかどうかを確認してください。

$('#addSubFOODItem').live('click', function () {
                var SubFoodItemDiv = $(this).parents("div.menuSubCategoryTitle");
                $('<div class="menuItemContainer"><input type="text" value="" placeholder="Item Name" name="foodItemName' + i + '" class="itemFieldEdit"><div class="itemPrice"><input type="text" value="" placeholder="Price" name="foodItemName' + i + '" class="priceInput"></div><div class="actionItemBox"><div class="homeLBoxRightEdit" id="remItem"><i class="icon-trash" id="remSubFoodItem">REMOVE ITEM</i></div></div></div>').appendTo(SubFoodItemDiv);
                i++;
                return false;
            });

要件が不足している場合はお知らせください。

于 2013-06-06T11:48:49.587 に答える
0

あなたは常にそれらを最初のものに追加して#subRootItemsいます。基本的に、DIV には一意の ID が必要です。

于 2013-06-06T11:27:42.873 に答える