将javascript规则应用于克隆元素

每次用户点击"添加披萨"按钮时,我希望该页面生成另一个披萨形式并添加额外披萨的任何费用.我已经能够添加披萨形式,但没有任何添加规则应用于克隆元素.有任何想法吗？

HTML:

    

        

            

            
Pizza
            Pizza Type:  
            
                Margarita
                Deep Pan
                Stuffed Crust
            
                
                Pizza Size:  
                
                    Extra Small - £4.99
                    Small - £5.99
                    Medium - £6.99
                    Large - £8.99
                    Extra Large - £9.99
                    Family Size - £10.99
                
                
            
        
        

        

            
Toppings (99p Each):  
            Onions
            Mushrooms
            Peppers
            Olives
            Garlic
            Peperoni
            Pesto
        
        
        

    
    

     Add Pizza 

JavaScript的:

var pizzaCost = 0.00;
var toppingCost = 0.00;
var sideCost = 0.00;
var drinkCost= 0.00;
var desertCost = 0.00;
var desertSizeCost = 0.00;
var drinkSizeCost = 0.00;
var sideSizeCost = 0.00;

$("#pizzaSize").prop('disabled', true);

$("#pizza").change(function() {
    $("#pizzaSize").prop('disabled', false);
})

$( "#pizzaSize" ).change(function() {
    $("input[type='checkbox']").prop('disabled', false);
    var selectionPrice = $('option:selected', this).attr('id');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost);
});

$('input[type=checkbox]').change(function(){
    var checked = $(":checkbox:checked").length;
    toppingCost = 0.99 * checked;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost);
});

function calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost) {
    var total = pizzaCost + toppingCost + sideCost + drinkCost + desertCost + desertSizeCost + drinkSizeCost + sideSizeCost;
    $("#totalPrice").text(total.toFixed(2));
}

$( "#addPizza" ).click(function() {
  $("#pizzaForm").clone().appendTo("#extraPizza");
});

Shyju.. 5

您应该on在注册事件时使用jQuery 委派,以便它可以用于动态创建和注入的表单元素.

$(document).on("change","#pizzaSize", function() {
    $("input[type='checkbox']").prop('disabled', false);
    var selectionPrice = $('option:selected', this).attr('id');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, 
                                                             drinkSizeCost, sideSizeCost);
});

此外,我发现您的代码存在一些问题.首先,你不应该在你的表单元素上保留Id,因为你正在制作克隆.此外,您不应使用Id使用jQuery选择来绑定事件.不超过一个元素应具有相同的Id.在元素上保留一些css类,您可以使用它来注册您的点击事件代码.也不要将价格保留在id属性值中.如果2件商品价格相同怎么办？相同的ID？这是不正确的.您应该将价格保留在HTML 5数据属性中.

您可以使用closest()方法获取父容器,然后使用find获取对相对大小下拉列表的引用.

$(document).on("change", ".pizza", function () {
    var _this = $(this);
    _this.closest("fieldset").find(".size").prop('disabled', false);

});

这是我提到的变化的工作样本.

您应该on在注册事件时使用jQuery 委派,以便它可以用于动态创建和注入的表单元素.

$(document).on("change","#pizzaSize", function() {
    $("input[type='checkbox']").prop('disabled', false);
    var selectionPrice = $('option:selected', this).attr('id');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, 
                                                             drinkSizeCost, sideSizeCost);
});

此外,我发现您的代码存在一些问题.首先,你不应该在你的表单元素上保留Id,因为你正在制作克隆.此外,您不应使用Id使用jQuery选择来绑定事件.不超过一个元素应具有相同的Id.在元素上保留一些css类,您可以使用它来注册您的点击事件代码.也不要将价格保留在id属性值中.如果2件商品价格相同怎么办？相同的ID？这是不正确的.您应该将价格保留在HTML 5数据属性中.

您可以使用closest()方法获取父容器,然后使用find获取对相对大小下拉列表的引用.

$(document).on("change", ".pizza", function () {
    var _this = $(this);
    _this.closest("fieldset").find(".size").prop('disabled', false);

});

这是我提到的变化的工作样本.