Kel Kel - 4 months ago 9
jQuery Question

Input number section function only works one time

I have one function for the number input box come with

+
and
-
button on the sides, and copy the code in my
shopify
theme which I use. But that function only show one time. But I need those apply to all the product offers.

(function ($) {

$.fn.bootstrapNumber = function (options) {

var settings = $.extend({
upClass: 'default',
downClass: 'default',
center: true
}, options);

return this.each(function (e) {
var self = $(this);
var clone = self.clone();

var min = self.attr('min');
var max = self.attr('max');

function setText(n) {
if ((min && n < min) || (max && n > max)) {
return false;
}

clone.focus().val(n);
return true;
}

var group = $("<div class='input-group'></div>");
var down = $("<button type='button'>-</button>").attr('class', 'btn btn-' + settings.downClass).click(function () {
setText(parseInt(clone.val()) - 1);
});
var up = $("<button type='button'>+</button>").attr('class', 'btn btn-' + settings.upClass).click(function () {
setText(parseInt(clone.val()) + 1);
});
$("<span class='input-group-btn'></span>").append(down).appendTo(group);
clone.appendTo(group);
if (clone) {
clone.css('text-align', 'center');
}
$("<span class='input-group-btn'></span>").append(up).appendTo(group);

// remove spins from original
clone.prop('type', 'text').keydown(function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
(e.keyCode == 65 && e.ctrlKey === true) ||
(e.keyCode >= 35 && e.keyCode <= 39)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}

var c = String.fromCharCode(e.which);
var n = parseInt(clone.val() + c);

//if ((min && n < min) || (max && n > max)) {
// e.preventDefault();
//}
});

clone.prop('type', 'text').blur(function (e) {
var c = String.fromCharCode(e.which);
var n = parseInt(clone.val() + c);
if ((min && n < min)) {
setText(min);
}
else if (max && n > max) {
setText(max);
}
});


self.replaceWith(group);
});
};
}(jQuery));

Answer

How do you initialise the function ?

Your problem certainly lies there... Because it works using this:

$('input').bootstrapNumber();

See my Fiddle that includes your exact unmodified script.