JQuery onClick AJAX事件在页面加载时触发，而不是onClick

Question

我需要知道以下代码中的内容是什么导致我的onClick AJAX事件在页面加载时命中服务器，而不是等待客户端上的按钮被点击。 如果有更好的方法去做我想做的事情，我也很愿意。 我正在使用ASP.NET MVC和KendoUI控件。

这是我的视图文件，其中包含代码细分

@using Kendo.Mvc.UI
@model GravanaWebUI.Models.Lessons.LessonPracticeViewModel

<script>
    $(document).ready(function() {
        $("#nextQuestion").hide();
        $("#nextQuestion").removeClass("hidden");


    });


    $(document).on("click","#nextQuestion", function(e) {

        var id = @Model.ActiveLessonId;
        var url = '@Html.Action("GetNextPracticeQuestion", "Lesson")';
        $.ajax({
            type: "POST",
            url: url,
            data: {activeLessonId : id },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
        e.preventDefault();
        function successFunc(data) {     
            alert(data);
        }

        function errorFunc() {
            alert('error');
        }
    });



</script>

<style>
    .k-grid .k-header {
        display: none;
    }

    div.hidden {
        display: none;
    }
</style>


<hr />

<div class="row">
    <div class="col-md-4 col-md-offset-5">
        <p><strong>@Model.QuestionText</strong></p>
    </div>
</div>
<hr />

<div class="demo-section">

    @(Html.Kendo().Grid(Model.Answers)
        .Name("answers")

        .Columns(columns =>
        {
            columns.Bound(o => o.AnswerChoiceChar).Width(10);
            columns.Bound(o => o.AnswerText).Width(200);
        })
        // .Pageable(pageable => pageable.ButtonCount(5))
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple))
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("Orders_Read", "Grid"))
         )
    )
</div>
<hr />
<div class="row">
    <div class="col-md-4">
        <button class="k-button" onclick="submit()">Submit</button>
    </div>
    <div class="col-md-3">
        <div id="Result"></div>
    </div>
    <div class="col-md-3">
        <button id="nextQuestion" class="k-button hidden" >Next Question</button>
    </div>

</div>

<hr />
<script>
            function submit() {
                var grid = $('#answers').data('kendoGrid');
                var selectedItem = grid.dataItem(grid.select());

                if (@Model.CorrectAnswerId !== selectedItem.Id) {
                    $("#nextQuestion").hide();
                    var WrongString = "<p style='color: red'><strong>The Answer of " + selectedItem.AnswerText + " is incorrect. Please try again!</strong><p>";

                    $("#Result").html(WrongString);

                } else {
                    var rightString = "<p style='color: green'><strong>The Answer of " + selectedItem.AnswerText + " is correct. Nice Work!</strong><p>";

                    $("#Result").html(rightString);

                    $("#nextQuestion").show();
                }


            }


</script>

这是服务器端方法，该方法不断受到负载的影响

public ActionResult GetNextPracticeQuestion(int activeLessonId)
{
    var viewModel = new LessonPracticeViewModel();

    return PartialView("LessonPracticeQuestionPartial", viewModel);
}

任何帮助将是非常感谢！

编辑

根据下面的注释，这里是包装上面的视图的视图。

@model GravanaWebUI.Models.Lessons.LessonPracticeViewModel 
@{ ViewBag.Title = "Lesson - Practice"; } 
<h2>Practice</h2> 
<div id="QuestionDisplay"> @Html.Partial("LessonPracticeQuestionPartial", Model) </div> 
<div class="row"> <div class="col-md-4"> @Html.ActionLink("Next", "LessonPracticeComplete", "Lesson", new {activeLessonId = Model.ActiveLessonId}, htmlAttributes: new {@class = "k-button"} ) 
</div> </div>

Answer 1

在对问题的评论帮助之后，我通过注释掉代码发现了问题，并发现了HTML帮助器的使用缺陷。

我有

@Html.Action("GetNextPracticeQuestion", "Lesson");

作为获取Ajax调用URL的方式，但我应该一直在使用

@Url.Action("GetNextPracticeQuestion", "Lesson");

动作呼叫是在进行呼叫，而不是AJAX呼叫。 令人惊讶的是，服务器端方法具有一个参数，并且上面的Action调用已将其填充。 我认为您将必须指定该方法，否则它将无法找到该方法，但必须在ASP.NET管道和管道中存在。

非常感谢@Sushil对到达这里的帮助。