I am working on the below code. Why am I not able to use the $('.quantity').each(function()
when adding the content dynamically to the document? As you can see the $('.quantity').each()
is functioning properly when is hard coded but not working on dynamic content.
$("#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>