jquery 点击方法没有附加到按钮

Question

我有 asp.net mvc 5 应用程序，但我无法使用这个相当简单的脚本。我是这个 MVC 的新手（我是 WebForms 人）。基本上 jQuery 没有将 .click() 事件附加到按钮以 post 数据到底层控制器。

有人可以指出我做错了什么吗？

视图（HelloWorld/Index.cshtml）：

@model HelloWorld.Models.HelloWorldModel

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script src="~/Scripts/jquery-2.1.3.min.js"></script>
</head>
<body>
    <div>
    @using (Html.BeginForm("Welcome","HelloWorld",FormMethod.Post, new {id = "myhelloform"})){

    <span>Name:</span> 
        @Html.TextBoxFor(model=> model.Name)
    <button id="btnPost" type="button">Post</button>
    }
    </div>

    <script>
    var testform = function () {
        var init = function () {
            $("#btnPost").on("click", function () {
                alert("anybody there??");
                submitForm();
            });
        };

        var submitForm = function () {
            $.hit({
                url: "@Url.Action("Welcome", "HelloWorld")",
                data: $("#myhelloform").serializeArray(),
                success: function (response) {
                    alert(response.Message);
                }
            });
        };

        return {
            Init: init
        };
    };

    </script>
</body>
</html>
</html>

控制器（Controllers/HelloWorldController.cs）：

using System.Web.Mvc;
namespace HelloWorld.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult Welcome()
        {
            return Json("test");
        }
    }
}

模型 (Models/HelloWorldModel.cs)

namespace HelloWorld.Models
{
    public class HelloWorldModel
    {
        public string Name { get; set; }
    }
}

Answer 1

您必须将 jquery 代码放在下一个函数中：

$( document ).ready(function() {
  // Here
});

Answer 2

$( document ).ready(function() {
   $("#btnPost").on("click", function () {
       alert("anybody there??");
       submitForm();
   });

   function submitForm () {
         $.hit({
             url: "@Url.Action("Welcome", "HelloWorld")",
             data: $("#myhelloform").serializeArray(),
             success: function (response) {
                 alert(response.Message);
             });
    };
});

Answer 3

您可以使用 input 而不是 button 并且不需要为此添加点击事件。

<input type="submit" id="btnPost" />

Answer 4

删除变量 testform 和 init 并且它有效（还需要使用 $( document ).ready 正如@Tbseven 提到的那样：

    $( document ).ready(function() {
                $("#btnPost").on("click", function () 
                                 {
                                    alert("anybody there??");

                                 });
});

Fiddle: https://dotnetfiddle.net/HCdFXM

jquery 点击方法没有附加到按钮

jquery click method is not attached to button

c#

asp.net-mvc