如何在動態添加的內容上啟用 jQuery

Question

我正在處理下面的代碼。 為什么在將內容動態添加到文檔時我無法使用$('.quantity').each(function() ？正如您所見， $('.quantity').each()在以下情況下正常運行是硬編碼的，但不適用於動態內容。

 $("#add").on("click", function(){ $("#content").empty(); for (var i = 0; i < 2; i++) { $("#content").append(`<div class="btn-group d-flex btn-num-controls quantity" role="group" aria-label="Basic example"> <button type="button" class="btn quantity-button quantity-down outline-0">-</button> <button type="button" class="btn number cart-odqty" data-min="1" data-max="8" data-step="1" value="1" id="">1</button> <button type="button" class="btn quantity-button quantity-up outline-0">+</button> </div>`); } }); $('.quantity').each(function() { var spinner = jQuery(this), input = spinner.find('.number'), btnUp = spinner.find('.quantity-up'), btnDown = spinner.find('.quantity-down'), val = input.text(), min = input.data('min'), max = input.data('max'); spinner.find(".number").text(val); btnUp.click(function() { var oldValue = parseFloat(input.text()); if (oldValue >= max) { var newVal = oldValue; } else { var newVal = oldValue + 1; } spinner.find(".number").text(newVal); spinner.find(".number").trigger("change"); }); btnDown.click(function() { var oldValue = parseFloat(input.text()); if (oldValue <= min) { var newVal = oldValue; } else { var newVal = oldValue - 1; } spinner.find(".number").text(newVal); spinner.find(".number").trigger("change"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add Content</button> <h3>Dynamic <sub> Not Working</sub></h3> <div id="content"></div> ======================================== <h3>Hard Coded <sub> Working</sub></h3> <div class="btn-group d-flex btn-num-controls quantity" role="group" aria-label="Basic example"> <button type="button" class="btn quantity-button quantity-down outline-0">-</button> <button type="button" class="btn number cart-odqty" data-min="1" data-max="8" data-step="1" value="1" id="">1</button> <button type="button" class="btn quantity-button quantity-up outline-0">+</button> </div>

Answer 1

在 DOM 加載時，在所有具有指定 class 的元素上設置一個偵聽器。 稍后當動態加載元素時，該元素缺少偵聽器。

一種解決方案是將偵聽器添加器設為 function 並在添加動態內容時調用它。 我已經編輯了這個解決方案的片段。

否則，您可以將點擊監聽器 function 分開，並在創建過程中將其添加到動態內容中。

 $("#add").on("click", function(){ $("#content").empty(); for (var i = 0; i < 2; i++) { $("#content").append(`<div class="btn-group d-flex btn-num-controls quantity" role="group" aria-label="Basic example"> <button type="button" class="btn quantity-button quantity-down outline-0">-</button> <button type="button" class="btn number cart-odqty" data-min="1" data-max="8" data-step="1" value="1" id="">1</button> <button type="button" class="btn quantity-button quantity-up outline-0">+</button> </div>`); } listenerAdd(); }); function listenerAdd(){ $('.quantity').each(function() { var spinner = jQuery(this), input = spinner.find('.number'), btnUp = spinner.find('.quantity-up'), btnDown = spinner.find('.quantity-down'), val = input.text(), min = input.data('min'), max = input.data('max'); spinner.find(".number").text(val); btnUp.click(function() { var oldValue = parseFloat(input.text()); if (oldValue >= max) { var newVal = oldValue; } else { var newVal = oldValue + 1; } spinner.find(".number").text(newVal); spinner.find(".number").trigger("change"); }); btnDown.click(function() { var oldValue = parseFloat(input.text()); if (oldValue <= min) { var newVal = oldValue; } else { var newVal = oldValue - 1; } spinner.find(".number").text(newVal); spinner.find(".number").trigger("change"); }); }); } listenerAdd();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add Content</button> <h3>Dynamic <sub> Not Working</sub></h3> <div id="content"></div> ======================================== <h3>Hard Coded <sub> Working</sub></h3> <div class="btn-group d-flex btn-num-controls quantity" role="group" aria-label="Basic example"> <button type="button" class="btn quantity-button quantity-down outline-0">-</button> <button type="button" class="btn number cart-odqty" data-min="1" data-max="8" data-step="1" value="1" id="">1</button> <button type="button" class="btn quantity-button quantity-up outline-0">+</button> </div>

Answer 2

你的代碼沒問題，只是放錯了地方。 我已經使用按鈕邏輯將代碼包裝在名為 function 中。 創建新按鈕時，您將使用此 function。

此外，新按鈕的 HTML 應包含在$(...)中以存儲它們並在您將它們 append 后使用它們#content

 function enableButtons() { var spinner = jQuery(this), input = spinner.find('.number'), btnUp = spinner.find('.quantity-up'), btnDown = spinner.find('.quantity-down'), val = input.text(), min = input.data('min'), max = input.data('max'); spinner.find(".number").text(val); btnUp.click(function() { var oldValue = parseFloat(input.text()); if (oldValue >= max) { var newVal = oldValue; } else { var newVal = oldValue + 1; } spinner.find(".number").text(newVal); spinner.find(".number").trigger("change"); }); btnDown.click(function() { var oldValue = parseFloat(input.text()); if (oldValue <= min) { var newVal = oldValue; } else { var newVal = oldValue - 1; } spinner.find(".number").text(newVal); spinner.find(".number").trigger("change"); }); } $("#add").on("click", function() { $("#content").empty(); for (var i = 0; i < 2; i++) { var buttonElements = $(`<div class="btn-group d-flex btn-num-controls quantity" role="group" aria-label="Basic example"> <button type="button" class="btn quantity-button quantity-down outline-0">-</button> <button type="button" class="btn number cart-odqty" data-min="1" data-max="8" data-step="1" value="1" id="">1</button> <button type="button" class="btn quantity-button quantity-up outline-0">+</button> </div>`); $("#content").append(buttonElements); buttonElements.each(enableButtons); } }); $('.quantity').each(enableButtons);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add Content</button> <h3>Dynamic <sub> Not Working</sub></h3> <div id="content"></div> ======================================== <h3>Hard Coded <sub> Working</sub></h3> <div class="btn-group d-flex btn-num-controls quantity" role="group" aria-label="Basic example"> <button type="button" class="btn quantity-button quantity-down outline-0">-</button> <button type="button" class="btn number cart-odqty" data-min="1" data-max="8" data-step="1" value="1" id="">1</button> <button type="button" class="btn quantity-button quantity-up outline-0">+</button> </div>

Answer 3

您可以將 jQuery 設置為實時偵聽器，方法是將其附加到父級，如下所示：

$("#parent").on("click", ".child", (event) => {...});

這樣，即使在設置監聽器之后添加了監聽器，監聽器也會附加到所有子節點。

因此，在您的情況下，類似於$("document").on("click", "#add", (event) => {...});