如何在动态添加的内容上启用jQuery each

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加载时，将在具有指定类的所有元素上设置侦听器。稍后，当动态加载某个元素时，该元素将缺少侦听器。

一种解决方案是使侦听器加法器成为一个函数，并在添加动态内容时调用它。我已经编辑了此解决方案的片段。

否则，您可以将click listener函数分离，并在创建过程中将其添加到动态内容中。

$("#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

您的代码还可以，只是放错地方了。我已经用按钮逻辑获取了代码，并将其封装在一个命名函数中。您将在创建新按钮时使用此功能。

此外，新按钮的HTML应该包装在$(...)中以存储它们，并在将它们附加到#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) => {...});