Razor Dropdown onchange 事件不触发总是未定义

Question

我在 razor 视图中使用下拉列表助手

@Html.DropDownList("Country", null, "Select Your Country", new { @class = "form-control", onchange = "clickMe()" })

我已将 jquery 文件放在 Layout.cshtml

的头部

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

但是当我将我的脚本放在剃刀视图中时

<script>
    $(document).ready(function () {
        function clickMe() { 
            alert();
        }
    });
</script>

它给出了引用错误：clickMe() 未定义。当我尝试使用此代码弹出警报以检查我的 jquery 文件是否已加载时这工作正常

<script>
    $(document).ready(function () {
        alert();
    });
</script>

Answer 1

我更喜欢将点击事件放在脚本中。尝试删除您的更改事件并将您的功能 clickMe 替换为

$(document).on('change', '#Country', function(){
    alert('made it!');
});

这会选择下拉列表的 ID，我相信它会是呈现的下拉列表中的国家/地区

Answer 2

这不起作用的实际原因是 Scoping。以下代码：

@Html.DropDownList("Country", 
  null, 
  "Select Your Country", 
  new { @class = "form-control", 
        onchange = "clickMe()" })

产生类似（我希望）的结果：

<select onchange="clickMe()">
// this is looking for a global `clickMe()` function
// but is it available?
</select>

我已经在此处注释了您的代码：

  // clickMe() is out of scope
  // it is not available here

  $(document).ready(function () 
  // start of anonymous function scope
  {

    function clickMe() 
    // start of clickme function scope
    { 
      alert();
    }
    // end of clickme function scope

    // clickMe() is available here
    // it was defined in this scope

  });
  // end of anonymous function scope

  // clickMe() is out of scope
  // it is not available here

</script>

我绝对不推荐这样做，但要了解您如何让它工作得如此糟糕，您可以执行以下操作：

<script>
  $(document).ready(function () 
  {
    window.clickMe = function()
    { 
      alert();
    }
  });
</script>

通过将函数分配给 window 对象，您可以使其全局可用。

更好的方法，利用可能看起来像：

<script>
    $(document).ready(function () {

        function clickMe() { 
            alert('made it!');
        }

        $(document).on('change', '#Country', clickMe );
    });
</script>

Answer 3

这是另一个选项：

<script>
 $('#CountryID').change(function() {
    var value = $('#CountryID').val();


<script>

只要确保你给你的下拉菜单 name= 或 id=

Razor Dropdown onchange 事件不触发总是未定义

Razor Dropdown onchange event not firing always undefined

javascript

asp.net-mvc

jquery

razor

asp.net-mvc-4