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

Question

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

我创建了一个JSFiddle来显示问题：https://jsfiddle.net/49q0369a/

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();
});
}

关于如何解决这个问题的任何方向赞赏！

Answer 1

选择Add seasonal price filter时，将执行以下代码

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

这会将事件侦听器添加到Add Price Rule按钮。

再次选择Add seasonal price filter时，新的事件侦听器将再次添加到"Add Price Rule"按钮中。因此，现在有两个事件与按钮相关联。由于按钮上有两个事件(都指向相同的方法(，因此该方法将执行两次(因此添加了两个部分(。

这同样适用于其他按钮。为了证明这一点，我在这里的jsFiddle中添加了一些console.log。选择Add Price Rule多次(例如 3 次(，然后为每个规则选择"Remove Price filter"。观察控制台。您将看到，当首次选择任何Remove Price Filter时，该方法(事件(将执行一次。选择下一个remove按钮时，事件将执行两次，依此类推。

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

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

这在这里的jsFiddle中得到了证明。