JavaScript 和 jquery : Unable to increment within a form

Question

我有一个像这样的简单增量函数:

  $(function(){
    $("#inc").click(function(){
        var value = parseInt($(":text[name='ice_id']").val()) + 1;
        $(":text[name='ice_id']").val(value);
    });
    $("#dec").click(function(){
        var value = parseInt($(":text[name='ice_id']").val()) - 1;
        $(":text[name='ice_id']").val(value);
    });
});

ice_id 文本字段嵌入到表单中

<form id="masterSubmit" name="masterSubmit" action="" method="post">
     <td><input id="ice_id" type="text" name="ice_id" size="16" maxlength="15"></td>
</form>

当我现在尝试增加 时，它成功增加了一个数字，但显示了以下奇怪的行为:它会“刷新”站点，以便文本字段的内容消失。如果我注释掉表单标签，这种行为就会消失……不幸的是，AJAX 提交需要表单标签。

有什么办法可以避免这个问题吗？

预先感谢您的任何提示和最好的问候

丹尼尔

Answer 1

只需执行return false;

$(function(){
    $("#inc").click(function(){
        var value = parseInt($(":text[name='ice_id']").val()) + 1;
        $(":text[name='ice_id']").val(value);
        return false;
    });
    $("#dec").click(function(){
        var value = parseInt($(":text[name='ice_id']").val()) - 1;
        $(":text[name='ice_id']").val(value);
        return false;
    });
});

您还可以改进您的代码:

$(function(){
    $("#inc").click(function(){

        $(":text[name='ice_id']").val(function(index, value) { return value++; });
        return false;

    });
    $("#dec").click(function(){

        $(":text[name='ice_id']").val(function(index, value) { return value--; });
        return false;

    });
});