在DOM加载时，在具有指定类的所有元素上设置一个侦听器。 稍后，当动态加载元素时，该元素缺少侦听器。

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

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

null

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

你的代码没问题，只是放错地方了。 我已经将带有按钮逻辑的代码打包到一个命名函数中。 您将在创建新按钮时使用此函数。

另外，新按钮的HTML应该包装在$(...)中，以便在将它们添加到#content之后存储和使用它们

null

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>