admin管理员组文章数量:1332359
I am using dropdownlist helper in my razor view
@Html.DropDownList("Country", null, "Select Your Country", new { @class = "form-control", onchange = "clickMe()" })
I have placed my jquery file in the head section of 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>
But when I placed my script in a razor view
<script>
$(document).ready(function () {
function clickMe() {
alert();
}
});
</script>
it gives Reference error : clickMe() is undefined. When I try this code to popup an alert to check that my jquery file is loaded this works fine
<script>
$(document).ready(function () {
alert();
});
</script>
I am using dropdownlist helper in my razor view
@Html.DropDownList("Country", null, "Select Your Country", new { @class = "form-control", onchange = "clickMe()" })
I have placed my jquery file in the head section of 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>
But when I placed my script in a razor view
<script>
$(document).ready(function () {
function clickMe() {
alert();
}
});
</script>
it gives Reference error : clickMe() is undefined. When I try this code to popup an alert to check that my jquery file is loaded this works fine
<script>
$(document).ready(function () {
alert();
});
</script>
-
box()is a function which has nothing to do with the code you have shown - did you meanclickMe()? The code you have shown works fine. – user3559349 Commented Mar 5, 2015 at 21:38
3 Answers
Reset to default 4The actual reason this doesn't work is because of Scoping. The following code:
@Html.DropDownList("Country",
null,
"Select Your Country",
new { @class = "form-control",
onchange = "clickMe()" })
Yields something like (I hope):
<select onchange="clickMe()">
// this is looking for a global `clickMe()` function
// but is it available?
</select>
I've annotated your code here:
// 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>
I absolutely do not remend this, but to understand how you could make it work horribly, you could do the following:
<script>
$(document).ready(function ()
{
window.clickMe = function()
{
alert();
}
});
</script>
By assigning the function to the window object you make it globally available.
The better way to do it, taking advantage of Matt Bodily's Answer might look like:
<script>
$(document).ready(function () {
function clickMe() {
alert('made it!');
}
$(document).on('change', '#Country', clickMe );
});
</script>
I much prefer putting the click events in the script. Try removing your on change event and replacing your function clickMe with
$(document).on('change', '#Country', function(){
alert('made it!');
});
this selects on the ID of the dropdown which I believe will be country in the rendered drop down
Here is another option:
<script>
$('#CountryID').change(function() {
var value = $('#CountryID').val();
<script>
Just make sure you give your dropdown name= or id=
本文标签： javascriptRazor Dropdown onchange event not firing always undefinedStack Overflow
版权声明：本文标题：javascript - Razor Dropdown onchange event not firing always undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742317475a2452110.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论