當通過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

回答

相關問題