Javascript 使用PHP和jQuery对动态表单输入进行onchange计算

情景：

我允许用户选择一些比萨饼，然后他们进入一个页面，在那里他们可以为每个比萨饼选择不同的选项。他们的想法是，当他们更改比萨饼的选项时，结果会显示在该比萨饼的结果div中，并带有价格。如果用户选择了3个比萨饼，那么将有很多选项，其中有三个分区显示每个分区的结果，还有一个总分区

我已经成功地循环并创建了选项框，但是我很难找到获得动态表单值选择的最佳方法，这样我就可以进行计算并运行一些ajax来填充结果div

这是生成的表单（尽管它们可能全部进入一个表单）

好的，在进一步挖掘之后，我找到了一个解决方案：

通过向输入添加事件：

onchange="calc(this)" 

我可以将分配给输入id的id追加，并获取其他元素的值

function calc(elem) {
//just get the number
    var id = $(elem).attr("id").match(/\d+$/);
//append the id to the element ID
    alert($('#pizzaname_'+id).val());
}

必须对动态创建的元素使用

事件委派允许我们将单个事件监听器附加到父元素，该监听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加

例如：

$(document).ready(function(){

    // to listen for value changes of the element with class 'bk':
    // (event is attached to the document) 
    $(document).on('change', '.bk', function(){
        var value = $(this).val();
        // do stuff when value has been changed...
    });

    // attach event to other element (must be one of the parents of the inputs)
    $('#some_parent_element').on('change', '.bk', function(){
        var value = $(this).val();
        // do stuff when value has been changed...
    });

})

我还将为每个输入添加一个
数据id
属性，以便您可以轻松获得id：

<select data-id="<?php echo $boxNum; ?>" name="sizes_<?php echo $boxNum; ?>"  id="sizes_<?php echo $boxNum; ?>"  class="bk">

很好，谢谢你花时间回答
<select data-id="<?php echo $boxNum; ?>" name="sizes_<?php echo $boxNum; ?>"  id="sizes_<?php echo $boxNum; ?>"  class="bk">

$(document).on('change', '.bk', function(){
    var id = $(this).data('id');
    var pizza_name = $('pizzaname_'+id).val();
});