jQuery克隆元素后，新增下拉选择框无法自动更新价格问题求助

算力阿峰

2026-5-19

解决动态生成下拉框无法更新价格的问题

嘿，我一眼就看出问题所在了——你动态添加的下拉选框没法触发价格更新，根源出在事件绑定的方式上！

问题原因

你原来的代码里是这么绑定事件的：

$(".menuItem").change(function() {
  calculateTotal();
});

这种方式只能给页面初始加载时就存在的.menuItem元素绑定change事件。而通过newMenuItem()函数动态创建的下拉框，是在页面加载完成后才生成的，它们并没有被绑定这个事件，所以选套餐时自然不会触发价格计算。

解决方案：事件委托

我们可以用事件委托来解决这个问题——把事件绑定到一个已经存在的父容器上（比如包裹所有客人项的#items），让父容器监听子元素的change事件。这样不管是初始的还是后来动态添加的.menuItem，只要触发change，父容器都会捕捉到并执行逻辑。

修改后的事件绑定代码如下：

// 用事件委托替代直接绑定
$("#items").on("change", ".menuItem", function() {
  calculateTotal();
});

完整修改后的JS代码

$(document).ready(function() {
  calculateTotal();

  // 事件委托：绑定到父容器#items，监听所有.menuItem的change事件
  $("#items").on("change", ".menuItem", function() {
    calculateTotal();
  });

  $("#addMenuItem").click(function() {
    newMenuItem();
  });
});

function newMenuItem() {
  var newElem = $("#itemTemplate").clone().removeAttr("id");
  newElem.find("input[type='text']").val("");
  newElem.appendTo("#items");
}

function calculateTotal() {
  var total = 0;
  $(".menuItem").each(function() {
    total += parseInt($(this).val());
  });
  $("#totalPrice").text(total);
}