$(document).on('click') 在某些移动设备上不起作用？

Question

I've got a script that's using .on() because an element is dynamically generated, and it isn't working on some mobile devices. You can try lilwhats.com/demo please use this website to test it out: https://www.browserling.com/ choose an older version of android or you can choose Windows Vista > Internet Explorer v9

restaurant.php

<?php
($allow_order
    ? '<div class="add-menu">
            <div class="add-btn add-item-to-order">
                <span>' . $lang['ADD'] . '</span>
                <i class="icon-feather-plus"></i>
            </div>
' .
    (!empty($extras) ? '<span class="customize">' . $lang['CUSTOMIZABLE'] . '</span>' : '')
    . '        </div>'
    : '') .

'

theme.js

// add menu to order
$(document).on('click','.add-item-to-order', function (e) {
    e.preventDefault();

    var $add_customize = $('<div class="add-btn add-item-btn">' +
        '<div class="wrapper h-100">' +
        '<div class="addition menu-order-quantity-decrease">' +
        '<i class="icon-feather-minus"></i>' +
        '</div>' +
        '<div class="count">' +
        '<span class="num menu-order-quantity">1</span>' +
        '</div>' +
        '<div class="addition menu-order-quantity-increase">' +
        '<i class="icon-feather-plus"></i>' +
        '</div>' +
        '</div>' +
        '</div>'),
        $item = $(this).closest('.section-menu'),
        item_id = $item.data('id'),
        name = $item.data('name'),
        description = $item.data('description'),
        price = $item.data('price'),
        amount = $item.data('amount'),
        order_price = Number(amount),
        extras = TOTAL_MENUS[$item.data('id')].extras || [],
        order_data = JSON.parse(localStorage.getItem('quickqr_order')),
        random_id = randomId(10);


    $item.data('cart_id',random_id);
    if(extras.length == 0){
        order_data[random_id] = {
            'id': item_id,
            'item_name': name,
            'item_price': amount,
            'extras': {},
            'quantity': 1
        };

        localStorage.setItem('quickqr_order', JSON.stringify(order_data));

        $item.find('.add-menu').html($add_customize);
    } else {
        $menuCustomize.find('h4').html(name);
        $menuCustomize.find('.customize-item-description').html(description);
        $('#order-price').html(formatPrice(amount));
        $('#menu-order-quantity').text(1);

        var $extra_wrapper = $('#customize-extras');
        $extra_wrapper.html('');

        for (var i in extras) {
            if (extras.hasOwnProperty(i)) {
                var $extra_tpl = $(
                    '<div class="extras menu-extra-item">' +
                    '<span class="extra-item-title"></span>' +
                    '<div class="d-flex align-items-center">' +
                    '<span class="mr-2 extra-item-price"></span>' +
                    '<div class="custom-control custom-checkbox mr-sm-2">' +
                    '<input type="checkbox" class="custom-control-input" id="customControl">' +
                    '<label class="custom-control-label" for="customControl"></label>' +
                    '</div>' +
                    '</div>' +
                    '</div>');

                $extra_tpl.find('.custom-control-input').attr('id', 'checkbox' + extras[i].id);
                $extra_tpl.find('label').attr('for', 'checkbox' + extras[i].id);
                $extra_tpl.find('.extra-item-title').html(extras[i].title);
                $extra_tpl.find('.extra-item-price').html(formatPrice(extras[i].price));
                $extra_tpl.data('price', extras[i].price);
                $extra_tpl.data('id', extras[i].id);

                $extra_tpl.find('.custom-control-input').on('change',function () {
                    $('#menu-order-quantity').text(1);
                    calculateOrderPrice(amount);

                });
                $extra_wrapper.append($extra_tpl);
            }
        }

        $menuCustomize.find('.menu-order-quantity-decrease').off().on('click', function (e) {
            e.stopPropagation();
            var quatity = Number($('#menu-order-quantity').text()) - 1;
            if(quatity == 0){
                quatity = 1;
            }
            $('#menu-order-quantity').text(quatity);
            calculateOrderPrice(order_price);
        });
        $menuCustomize.find('.menu-order-quantity-increase').off().on('click', function (e) {
            e.stopPropagation();
            $('#menu-order-quantity').text(Number($('#menu-order-quantity').text()) + 1);
            calculateOrderPrice(order_price);
        });

        $('#add-order-button').off().on('click', function (e) {
            calculateOrderPrice(order_price);
            var price = $('#order-price').html();
            var order_data = JSON.parse(localStorage.getItem('quickqr_order'));

            // this order's extras
            var extras = {};
            $('.menu-extra-item').each(function () {
                if($(this).find('.custom-control-input').is(':checked')){
                    extras[randomId(10)] = {
                        'id': $(this).data('id'),
                        'name': $(this).find('.extra-item-title').html(),
                        'price': $(this).data('price')
                    };
                }
            });

            order_data[random_id] = {
                'id': item_id,
                'item_name': name,
                'item_price': amount,
                'extras': extras,
                'quantity': $('#menu-order-quantity').text()
            };

            localStorage.setItem('quickqr_order', JSON.stringify(order_data));

            $add_customize.find('.menu-order-quantity').text($('#menu-order-quantity').text());
            $item.find('.add-menu').html($add_customize);

            manageViewOrder();
            $('.overlay').trigger('click');
        });


        $menuCustomize.addClass('active');
        $('.overlay').addClass('active');
        $('body').addClass('noscroll');
    }
    manageViewOrder();
});

I really appreciate any help

$order_tpl.find('.menu-order-quantity-decrease').off().on('click', function (e) {
    e.stopPropagation();
    var $item = $(this).closest('.section-menu');
    var $quantity = $item.find('.menu-order-quantity');
    var quantity = Number($quantity.text()) - 1;
    var cart_key = $item.data('cart_id');
    var $menu_item = $('.section-menu[data-id="' + order_data[cart_key]['id'] + '"]');
    if (quantity == 0) {
        var $add_btn = $('<div class="add-btn add-item-to-order">' +
            '<span>' + LANG_ADD + '</span>' +
            '<i class="icon-feather-plus"></i>' +
            '</div>');
        $menu_item.find('.add-menu').html($add_btn);
        delete order_data[cart_key];

    } else {
        $menu_item.find('.menu-order-quantity').text(quantity);
        order_data[cart_key]['quantity'] = quantity;
    }

    localStorage.setItem('quickqr_order', JSON.stringify(order_data));
    generateViewOrder();
});

Answer 1

There is no mouse on a phone or tablet so try to add events to you handler

$(document).on("click tap touchstart", "element", function(e){
 //code here 
}

Answer 2

jQuery Current Active Browser Support

Desktop
Chrome: (Current - 1) and Current
Edge: (Current - 1) and Current
Firefox: (Current - 1) and Current, ESR
Internet Explorer: 9+
Safari: (Current - 1) and Current
Opera: Current

Mobile
Stock browser on Android 4.0+[1]
Safari on iOS 7+

If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12 .

For more details please checkout this link .