0

我正在尝试使用 Jquery 将 Subsection 添加到 Section 并将 Item 添加到 Subsection

小节的每个项目对其父项都是唯一的。我已经做了一些接近的事情，但我无法在新添加的小节下添加项目。

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