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

我从通过JavaScript创建的另一个div附加了一些HTML - 我第一次追加HTML一切正常，但是当我再次追加HTML时，它添加了内容两次，我猜是因为它是从附加通过JS同时创建的div的HTML，如果我再追加它，它增加了三个拷贝，然后是四个等当通过JS复制内容时，使用jQuery将HTML附加到div

我创建了一个的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(); 
     }); 
    }

任何方向如何解决这个赞赏！

来源

2017-07-25 The Bobster

如果有人对此感兴趣，就想出来 - 你只需要添加e.preventDefault（）;直到点击结束 –

您可以将其添加为答案。 –

你是否多次调用'add_price_rule'？ –

当Add seasonal price filter选择下面的代码被执行

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

这增加事件侦听器向Add Price Rule按钮。

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

同样适用于其他按钮。为了演示这个，我在jsFiddle here中增加了一些console.log。选择Add Price Rule倍数（比如3）次，然后为每个规则选择Remove Price filter。观察控制台。你会看到当第一次选择任何时，方法（事件）会被执行一次。当选择下一个remove按钮时，该事件将执行两次，依此类推。

我更喜欢使用jQuery off事件修复此问题。相应的代码现在看起来像下面

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

这表现在jsFiddle here。

来源

2017-07-25 08:12:37 Taleeb

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

回答

相关问题