Javascript 未将增量按钮追加到数量字段

我正在尝试将购物车中使用的数量递增和递减按钮复制到我网站的另一个页面上。我已经创建了一个JSFIDLE，它保存了所有相关的代码，这些代码在实时站点上可以完美地运行，但由于我不理解的原因，它在另一个页面上甚至在JSFIDLE中都不起作用。 输入字段为html

<div class="shopping_cart_product_qty_wrapper">
<input type="text" name="cart_quantity[]" value="1" size="4" class="cart_input_1698:9fe97fff97f089661135d0487843108e" />
</div>

相关的脚本是

// Add Increment/Decrement buttons
function add_quantity_buttons(element, vertical) {
    quantity_input = jQuery(element);
    quantity_input.attr('min', '0').attr('inputmode', 'numeric').attr('pattern', '[0-9]*').addClass('inc_dec_quantity_field').wrap('<div class="quantity_field_wrapper clearfix"></div>');

    if (jQuery('.device-xs').is(':visible')) {
        quantity_input.attr('type', 'number');
    } else {
        quantity_input.attr('type', 'text');
    }

    if (jQuery('.device-xs').is(':visible') && vertical !== undefined) {
        quantity_input.after('<a href="#decrease_quantity" class="quantity_dec_button">-</a>').before('<a href="#increase_quantity" class="quantity_inc_button">+</a>');
    } else {
        quantity_input.before('<?php echo ' < span class = "mobile-qty mobile-button-on" > '."Qty:".' < /span>'; ?><a href="#decrease_quantity" class="quantity_dec_button">-</a > ').after(' < a href = "#increase_quantity" class = "quantity_inc_button" > + < /a>');
    }
}

// Handle quantity buttons
// Increment/Decrement button functionality
function increment_decrement_quantity(element, value) {
    $(document.body).on('click', element, function(e) {
        e.preventDefault();
        quantity = $(this).parent().find(('input'));
        quantity_value = parseInt(quantity.val(), 10);
        quantity_multiple = undefined;

        if (quantity.data('multiple') !== undefined && (quantity.data('multiple') > 0 || quantity.data('multiple') < 0)) {
            quantity_multiple = parseInt(quantity.data('multiple'), 10);
                if (value < 0) {
                    quantity_multiple = quantity_multiple * -1;
                }
            }

            if (quantity_multiple !== undefined && (quantity_multiple > 0 || quantity_multiple < 0)) {
                quantity_value = Math.floor(quantity_value / quantity_multiple) * quantity_multiple;
                value = quantity_multiple;
            } else {
                value = parseInt(value, 10);
            }

            // Validate quantity and increment/decrement value
            if (value > 0 || value < 0 && quantity_value > 0) {
                quantity.val(quantity_value + value).trigger('change');
            }
        });
    }

    // Remove number type and add quantity change buttons
    add_quantity_buttons('#cartContentsDisplay input[name^="cart_quantity"]', true);

    // Decrement button
    increment_decrement_quantity('.quantity_dec_button', -1);

    // Increment button
    increment_decrement_quantity('.quantity_inc_button', +1);

    // Quantity input validation
    var ajax_called = false;
    $(document.body).on('propertychange change click keyup input paste blur', '.inc_dec_quantity_field', function(e) {
        character_code = !e.charCode ? e.which : e.charCode;
        quantity_value = $(this).val();
        leading_zero_plus_regexp = /^(0[0-9]|\+[\+,0-9]).*$/;

        // When input goes out of focus validate quantity value
        if (e.type == 'blur' && (quantity_value == '' || isNaN(quantity_value / 1) == true || isNaN(quantity_value / 1) == false && quantity_value <= 0)) {
            $(this).val('0');
        } else {
            // Check for numeric value and allow backspace, delete, left and right arrows
            if ((isNaN(quantity_value / 1) == false && quantity_value > 0) || (character_code != undefined && (character_code == 39 || character_code == 37 || character_code == 8 || character_code == 46))) {
                // Correct value
                // Make sure the quantity is integer
                if (quantity_value != '' && isNaN(quantity_value / 1) == false && (quantity_value != parseInt(quantity_value, 10) || leading_zero_plus_regexp.test(quantity_value))) {
                    $(this).val(parseInt(quantity_value, 10));
                }
            } else if (character_code != undefined) {
                // Incorrect value
                $(this).val('0');
            } else if (quantity_value != '' && isNaN(quantity_value / 1) == false && (quantity_value != parseInt(quantity_value, 10) || leading_zero_plus_regexp.test(quantity_value))) {
                // Make sure the quantity is integer
                $(this).val(parseInt(quantity_value, 10));
            }
        }
});

//添加递增/递减按钮
功能添加\数量\按钮（元素，垂直）{
数量\输入=jQuery（元素）；
数量输入.attr（'min'，'0'）.attr（'inputmode'，'numeric'）.attr（'pattern'，'[0-9]*'））.addClass（'inc_dec_数量字段'）.wrap（''）；
if（jQuery（'.device xs'）。是（':visible'））{
数量输入属性（“类型”、“数量”）；
}否则{
数量输入属性（'type'，'text'）；
}
if（jQuery（'.device xs'）。是（':visible'）&&vertical！==未定义）{
数量输入在（“”）之后（“”）之前（“”）；
}否则{
输入前的数量

预期结果应给出如下数量字段：

我去掉了页面中所有的js和css，只留下了在我组装小提琴之前使增量按钮工作所需的东西，所以我相当确定没有遗漏任何东西

我希望SO方面的专家能够发现问题，因为我整天都在为这个问题绞尽脑汁，还没有弄清楚它为什么不能按预期工作！
这一行的引号有一个问题——你可以从语法中看到

   quantity_input.before('<?php echo ' < span class = "mobile-qty mobile-button-on" > '."Qty:".' < /span>'; ?><a href="#decrease_quantity" class="quantity_dec_button">-</a > ').after(' < a href = "#increase_quantity" class = "quantity_inc_button" > + < /a>');

quantity\u input.before（'-'）。before（'+）；
@j08691好地方。我在设置标签时没有引起足够的注意！我的道歉在此说明：
。之前（'的确.jsfiddle无法在javascript中处理php标记中的任何内容，并且由于某些原因，一些html标记获得了不需要的空格。感谢您指出这一点。我从小提琴中删除了php部分和错误空格，现在它确实可以工作了。