Javascript 通过JS复制内容时，使用jQuery将HTML附加到div

我从另一个通过JavaScript创建的div中附加了一些HTML——第一次附加HTML时，一切都正常，但是当我再次附加HTML时，它会添加两次内容，我猜是因为它附加了通过JS创建的两个div中的HTML，如果我再次附加它，它会添加三个副本，然后是四个副本，以此类推

我创建了一个JSFIDLE来说明问题：

1.）点击“每晚定价”

2.）点击“季节性定价”

3.）单击“添加季节性价格过滤器”，然后单击“添加价格规则”（此处一切正常）

4.）再次单击“添加季节性价格过滤器”，然后单击“添加价格规则”（仍正常工作）

5.）现在，对于第一个“季节性过滤器#1”，再次单击“添加价格规则”，您将看到它添加了两个价格规则div，而不是一个（这就是问题所在，应该始终只添加一个）

添加价格规则的函数：

function add_price_rule() {
        $(".add-price-rule").on( "click", function() {
            $(this).parent().find(".price-rule-wrapper-outer").append($(".price-rule-wrapper").html());
            remove_price_rule();
            recacluclate();
        });
    }

---

任何关于如何解决这个问题的方向都是值得赞赏的

当选择了

添加季节性价格过滤器

时，将执行以下代码

$(".add-price-rule-season").on( "click", function() {
  ...
}

这会将事件侦听器添加到

添加价格规则

按钮

当再次选择添加季节性价格过滤器时，新的事件侦听器将再次添加到添加价格规则按钮中。因此，现在有两个与按钮相关的事件。由于按钮上有两个事件（都指向同一个方法），该方法执行两次（因此添加了两个部分）

这同样适用于其他按钮。为了演示这一点，我在中添加了一些

console.log

。选择

addprice Rule

多次（比如说3次），然后为每个规则选择

Remove Price filter

。观察控制台。您将看到，当第一次选择任何

Remove Price Filter

时，方法（事件）执行一次。当选择下一个

删除

按钮时，事件将执行两次，以此类推

我更喜欢使用jqueryoff事件来解决这个问题。 相应的代码现在如下所示

$(".add-price-rule-season").off().on( "click", function() {
  ...
}

---

这在中得到了演示。

如果有人对此感兴趣，您只需添加e.preventDefault（）；在on Click的末尾，您可以将其添加为答案。您是否多次呼叫

add\u price\u rule

？