e.keyCode 13（输入键）和按键事件更新篮子有时不起作用

Question

我通过下面的 OOP 功能使用按键来更新我的网站购物车和数量值。有时它可以工作，但大多数时候当我按下回车键时它不会 a) 更新购物车或 b) 更新 qty 值。我认为它正在刷新页面，这可能是问题所在。

我通过检查 qty 元素查看了请求标头值，如果有帮助，当按下 enter 键时它不会更新。

function initBinds() {
    if ($('.remove_basket').length > 0) {
        $('.remove_basket').bind('click', removeFromBasket);
    }
    if ($('.update_basket').length > 0) {
        $('.update_basket').bind('click', updateBasket);
    }
    if ($('.fld_qty').length > 0) {
        $('.fld_qty').bind('keypress', function(e) {
            var code = e.keyCode ? e.keyCode : e.which;
            if (code == 13) {
                updateBasket();
            }
        });
    }
}

这里是 updateBasket 函数

function updateBasket() {
    $('#frm_basket :input').each(function() {
        var sid = $(this).attr('id').split('-');
        var val = $(this).val();
        $.ajax({
            type: 'POST',
            url: '/mod/basket_qty.php',
            data: ({ id: sid[1], qty: val }),
            success: function() {
                refreshSmallBasket();
                refreshBigBasket();
            },
            error: function() {
                alert('An error has occurred');
            }
        });
    });
}

而且，这是页面...

注意，您可以在第 41 行看到 fld_qty 类用于 initiBinds 按键功能 if 语句。

<?php 

$session = Session::getSession('basket');
$objBasket = new Basket();

$out = array();

if (!empty($session)) {
    $objCatalogue = new Catalogue();
    foreach ($session as $key => $value) {
        $out[$key] = $objCatalogue->getProduct($key);   
    }
}

    require_once('_header.php'); ?>

    <div id="cat_prod"><h1>- BASKET -</h1></div>

<?php 

if (!empty($out)) { ?>

<div id="big_basket">
    <form action="" method="post" id="frm_basket">
    <table cellpadding="0" cellspacing="0" border="0" class="tbl_repeat">
        <tbody id="basket_table">
        <tr style="background-color: #f2f3ee;"> 

            <th class="ta_left">Item</th>
            <th class="ta_r">Qty</th>
            <th class="ta_r col_15">Price</th>
            <th class="ta_r col_15"></th>

        </tr>

        <?php foreach ($out as $item) { ?>

        <tr>
            <td class="ta_left_name"><?php echo Helper::encodeHTML($item['name']); ?></td>
            <td class="ta_left_qty"><input type="text" name="qty-<?php echo $item['id']; ?>"
                    id="qty-<?php echo $item['id']; ?>" class="fld_qty"
                    value="<?php echo $session[$item['id']]['qty']; ?>" /></td>
            <td class="ta_r">&pound;<?php echo number_format($objBasket->itemTotal($item['price'], $session[$item['id']]['qty']), 2); ?></td>
            <td class="ta_r">&#160;<?php echo Basket::removeButton($item['id']); ?></td>

        </tr>

        <?php } ?>

        <?php if ($objBasket->_vat_rate != 0) { ?>

        <tr style="border-bottom: dashed 1px #aaa">

            <td class="ta_left" colspan="2">Sub-total :</td>
            <td class="ta_r bt_td">&pound;<?php echo number_format($objBasket->_sub_total, 2); ?></td>
            <td class="ta_r bt_td">&#160;</td>

        </tr>

        <tr style="border-bottom: dashed 1px #aaa">

            <td class="ta_left" colspan="2">VAT (<?php $objBasket->_vat_rate; ?>%) :</td>
            <td class="ta_r bt_td">&pound;<?php echo number_format($objBasket->_vat, 2); ?></td>
            <td class="ta_r bt_td">&#160;</td>

        </tr>

        <?php } ?>

        <tr>

            <td class="ta_right" colspan="2"><strong>Total :</strong></td>
            <td class="ta_r bt_td">&pound;<?php echo number_format($objBasket->_total, 2); ?></td>
            <td class="ta_r bt_td">&#160;</td>

        </tr>

        </tbody>
    </table>

    <div class="dev br_td">&#160;</div>
    <div class="dev br_td">&#160;</div>

    <div class="sbm sbm_blue fl_r">

    <a href="/?page=checkout" class="btn">Checkout</a>

    </div>

    <div class="sbm sbm_blue fl_l update_basket">

    <span class="btn">Update</span>

    </div>

    </form>
</div>

<?php } else { ?>

<br />
<br />
<p><em>Your basket is currently empty.</em></p>


<?php } ?>

<?php require_once('_footer.php'); ?>

我已经浏览了一些关于此的 statckflow 页面，并尝试了 keydown 并仅使用 e.which 和 e.keyCode || e.which，但它们都呈现相同的问题，即当您按 Enter 键时 100% 无法正常工作。

我知道有些浏览器可能不支持这个，那么这个操作有更好的方法吗？我已经测试过 Firefox、Chrome 和 Safari（都是最新的）。

感谢您的帮助，不胜感激！ :)

编辑；

这里还有 mod/basket_qty.php...

<?php
require_once('../inc/autoload.php');

if (isset($_POST['qty']) && isset($_POST['id'])) {

    $out = array();
    $id = $_POST['id'];
    $val = $_POST['qty'];

    $objCatalogue = new Catalogue();
    $product = $objCatalogue->getProduct($id);

    if (!empty($product)) {

        switch($val) {
            case 0:
            Session::removeItem($id);
            break;          
            default:
            Session::setItem($id, $val);
        }
    }
}

Answer 1

看起来我需要在 if (code == 13) { 的 initBinds 函数中添加 e.preventDefault();，正如 cmorrissey 所指出的那样。这似乎工作正常。谢谢！！