Razor Dropdown onchange事件未触发始终未定义

Razor Dropdown onchange event not firing always undefined

本文关键字：未定义 Dropdown onchange 事件 Razor      更新时间：2023-09-26

我正在剃刀视图中使用dropdownlist助手

@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>

这不起作用的实际原因是因为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>

通过将函数指定给窗口对象，可以使其全局可用。

更好的方法是利用Matt Bodily的答案：

<script>
    $(document).ready(function () {
        function clickMe() { 
            alert('made it!');
        }
        $(document).on('change', '#Country', clickMe );
    });
</script>

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

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

这是在下拉列表的ID上选择的，我认为它将是呈现的下拉列表中的国家

这里有另一个选项：

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

<script>

只需确保您的下拉列表name=或id=

相关文章：