Javascript 单击其他图像按钮提交表单

我遇到了一个非常奇怪的问题。我有一个带有3个图像按钮的html.beginform：

添加和删除字段的2个按钮 1.提交表格 这些按钮与javascript事件挂钩。现在的问题是，每当我点击add/remove按钮时，它就会添加/删除一个字段，然后表单立即被提交并进入下一页。但是，当我使用常规按钮添加/删除时，一切正常

这就像javascript事件的图像按钮执行一样，与单击的按钮无关

Javascript代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').length; 
        var numCheck = $('.clonedInputCheck').length;
        var newNum = new Number(num + 1);      


        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        var newElemCheck = $('#inputCheck' + num).clone().attr('id', 'inputCheck' + newNum);

        newElem.children(':eq(0)').attr('id', 'extra' + newNum).attr('name', 'extra' + newNum).val('');
        newElemCheck.children(':eq(1)').attr('id', 'checkVerplicht' + newNum).attr('name', 'checkVerplicht' + newNum).val('');

        if (newNum <= 5) {
            $('#input' + num).after(newElem);
            $('#inputCheck' + num).after(newElemCheck);
        }


        $('#btnDel').attr('disabled', false);
        $('#btnDel').show();

    });

    $('#btnDel').click(function () {
        var num = $('.clonedInput').length; 
        var priceNum = $('.clonedInput').length;
        $('#input' + num).remove();     
        $('#inputCheck' + num).remove();


        $('#btnAdd').attr('disabled', false);


        if (num - 1 == 1) {
            $('#btnDel').attr('disabled', true);
            $('#btnDel').hide();
        }
    });

    $('#btnDel').attr('disabled', true);
    $('#btnDel').hide();

    $("#btnSubmit").click(function () {
        $("#veldenForm").submit();
    });
});

HTML代码：

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "veldenForm" }))
{
@Html.ValidationSummary(true)


@section Top {
    <h2>1. Kies de nodige velden</h2>
}
<div class="tabel-container">
    <div class="inter-div">
        <div class="velden-tabel">
            <table class="velden">

                @foreach (string var in data)
                {

                    <tr>
                        <td>
                            @Html.CheckBox(var)
                            <label for="Naam">@var</label>
                        </td>
                        <td>
                            @Html.CheckBox("Verplicht" + @var)
                            <label for="Verlpicht">Verplicht veld</label>
                        </td>
                    </tr>

                }

                <tr>
                    <td>
                        <div id="input1" class="clonedInput">

                            @Html.TextBox("extra1")
                        </div>

                    </td>

                    <td>
                        <div id="inputCheck1" class="clonedInputCheck">
                            @Html.CheckBox("checkVerplicht1")

                            <label for="checkVerplicht1" id="labelVerplicht1">Verplicht veld</label>
                        </div>

                    </td>
                </tr>

            </table>
        </div>
    </div>
</div>



<div>
    <input type="image" id="btnAdd" src="~/Images/button_add.png" />
    <input type="image" id="btnDel" src="~/Images/button_remove.png" />
</div>

@section Bottom{

    <input id="btnSubmit" type="image" src="~/Images/navigation_right_button.png" />
}


}

编辑

---

即使我删除了javascript代码，因此添加/删除按钮没有附加任何操作，当单击它们时，它们仍会导航到下一页。

带有图像类型的输入功能类似于提交按钮。你需要取消活动。将javascript更改为以下内容：

$('#btnAdd').click(function (e) {
    //all the other stuff you were doing here...
    e.preventDefault();
    return false;    
});

对删除按钮单击处理程序进行类似的修改。

是否尝试添加

OnClientClick="return false;"

---

到您不想回发的两个输入类型的图像。

它在JSFIDLE上不起作用，因为我使用的是mvc，所以控制器是必需的，但是，您可以提取呈现的html，并将其与必要的javascript结合，以重复该问题，并将其放入JSFIDLE中。当您无法重现问题时，帮助他人调试问题是非常困难的。老实说，隔离一个问题的行为通常能找到解决方案。输入image类型的内容将提交表单。来源：您不需要两者都使用。preventDefault和returnfalse。一个就够了。谢谢@Becuzz和@MelanciaUK！返回错误就成功了。