AJAX對控制器操作的調用不一致

Question

我在ASP.NET MVC4中有一個簡單的表單，帶有一個文本框和兩個按鈕。

@using (Html.BeginForm("Steps", "Technique", new 
                      { step = ViewBag.step + 1, 
                         techniqueId = @Model.Krok.TechniqueId
                      },
                      FormMethod.Post,
                      new { id = "theForm" })
       )
 { 
    <label>@Model.Krok.Text</label>

    @Html.HiddenFor(model => model.Krok.Id)
    @Html.HiddenFor(model => model.Krok.Poradi)
    @Html.HiddenFor(model => model.Krok.TechniqueId)
    @Html.TextBoxFor(m => m.Text)
    if (@Model.Krok.HasMultipleAnswers)

    <input type="button" value="Add One More" id="AddButton" />

    <input type="submit" value="Next Step" id="submit_btn" />
}
<input type="button" value="Add One More" id="add_btn" />
<input type="submit" value="Next Step" id="submit_btn" />

第一個按鈕使用jQuery創建另一個文本框，第二個按鈕處理所有文本框並將數據存儲到SQL。

$("#add_btn").click(function () {
        $("#theForm").append("<br /><label> one more attribute</label>")
                     .append("<input type = 'Text' id='_addText' />");
    });

一旦單擊處理表單的按鈕，jQuery就會處理此事件並將數據發送到控制器操作。

$("#submit_btn").click(function () {
        alert("clicked!")
        var options = {};
        options.url = "/Technique/AjaxTest";
        options.type = "POST";
        options.data = JSON.stringify(
        {
            answer: $("#_addText").val()
        });
        options.contentType = "application/json";
        options.dataType = "json";
        options.error = function (jqXHR, status, err) { alert(status); };
        $.ajax(options);
    });

但是，此控制器動作未始終呈現，這意味着有時會觸發該動作並按需處理，但有時甚至沒有調用該動作（我正在使用調試器）。 為什么它不能始終如一地工作？

Answer 1

似乎沒有抑制按鈕單擊的默認操作（即表單的HTTP POST提交），並且這可能是在jQuery動作之前發生的。

如果你有

$("#submit_btn").click(handleSubmit);

function handleSubmit(e) {
    e.preventDefault();
    e.stopPropagation();

    alert("clicked");
    ......
}

然后，您將獲得HTTP POST。