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 提供的帮助。

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

JQuery onClick AJAX Event is Firing On Page Load instead of onClick

javascript

asp.net-mvc

jquery

kendo-ui

kendo-asp.net-mvc