克隆项目jquery，选择下拉不正确更新

Question

在我的网站上，我有一个选项，用户可以将多个客人添加到预订中并选择他们想要购买的套餐。

选择套餐后，价格会根据选择选项的值自动更新。

出于某种原因 - 第一个下拉菜单（已经在页面上）起作用并更新价格。

但是，当您运行 newMenuItem() 函数时，它为您提供的选择下拉菜单不会更新价格。

这是我的代码

HTML

<h3 class="margin-top-0 margin-bottom-30">Guest Details <small>(Guests you're paying for)</small></h3>

<table id="pricing-list-container">
<tr class="pricing-list-item pattern">
<td>

<div class="fm-input pricing-name">         <label>Package</label>
    <select data-placeholder="Select Item">
    <option>Select a package </option>

    <option value = "100">1</option>
    <option value = "200">2</option>
        <option value = "300">3</option>
</select>
</div>



<div class="fm-close"><a class="delete" href="#"><i class="fa fa-remove"></i></a></div>
</td>
</tr>
</table>
<a href="#" class="button add-pricing-list-item">Add Guest</a>


<span id = "price">ddd</span>

JS

  $(document).ready(function(){
                        $(function () {
                    var fields = $('select').change(calculate);


                    function calculate() {
                            var price = 0;
                            fields.each(function () {
                                    price += +$(this).val();
                            })
                            $('#price').html(price.toFixed(2));
                    }
                    })


          function newMenuItem() {
        var newElem = $('tr.pricing-list-item.pattern').first().clone();
        newElem.find('input').val('');
        newElem.appendTo('table#pricing-list-container');
    }

    if ($("table#pricing-list-container").is('*')) {
        $('.add-pricing-list-item').on('click', function(e) {
            e.preventDefault();
            newMenuItem();
        });

        // remove ingredient
        $(document).on( "click", "#pricing-list-container .delete", function(e) {
            e.preventDefault();
            $(this).parent().parent().remove();
        });



    }



});

https://jsfiddle.net/1pzxk241/

Answer 1

首先，您的 JSfiddle 中似乎存在一些语法错误，您缺少一个结束括号。

您看到的问题与事件在 DOM 中的绑定方式有关。您会发现任何动态添加的内容都是如此。

问题：

当您创建一个新的选择控件并将其附加到 DOM 时，更改监听器不知道该控件。这是因为侦听器已应用于页面首次加载时存在的所有控件，但不会自动应用于随后出现的任何控件。

解决办法：

要解决此问题，您需要将 on change 侦听器应用于更高级别的对象，以便在添加子元素时，它将包含在父元素的侦听器事件中。

对于您的代码，这将替换此部分：

$(function () {
                var fields = $('select').change(calculate);


                function calculate() {
                        var price = 0;
                        fields.each(function () {
                                price += +$(this).val();
                        })
                        $('#price').html(price.toFixed(2));
                }
                })

});

有了这个：

$(document).on('change', 'select', function() {
  var price = 0;
  $(this).each(function () {
    price += +$(this).val();
  })
  $('#price').html(price.toFixed(2));      
})

我还要注意，您在该 sn-p 中的逻辑只会获取最后更改的控件的值，并且不会对所有控件的值求和。为此，您需要获取每个选定项目的值。

像这样：

$(document).on('change', 'select', function() {
  var price = 0;
  $.each($('select option:selected'), function() {
            price += parseFloat($(this).val());
        });
  $('#price').html(price.toFixed(2));      
})

希望对您有所帮助。

Answer 2

尝试用这个替换你的函数

$(function () {
                var fields = $('#pricing-list-container').on(
        {
            change: function ()
          {
                            var price = 0;
                            price += +$(this).val();
            $('#price').html(price.toFixed(2));

          }
        },'.pricing-list-item select');
});