I have a @Html.DropDownList which calls a jquery function. But it failed to call the function. I have tried-

$(document).ready(function () {
    $('.test').change(function () {
        alert("1");            
    });
});

@Html.DropDownList("PropertyContent", ViewBag.PropertyList as List<SelectListItem>, new { @class="test"})

and

function test() {
        alert("1");
    }

@Html.DropDownList("PropertyContent", ViewBag.PropertyList as List<SelectListItem>, new { onchange="test();"})


@Scripts.Render("~/bundles/jqueryval") is also included in the view

Whats wrong here?

I have a @Html.DropDownList which calls a jquery function. But it failed to call the function. I have tried-

$(document).ready(function () {
    $('.test').change(function () {
        alert("1");            
    });
});

@Html.DropDownList("PropertyContent", ViewBag.PropertyList as List<SelectListItem>, new { @class="test"})

and

function test() {
        alert("1");
    }

@Html.DropDownList("PropertyContent", ViewBag.PropertyList as List<SelectListItem>, new { onchange="test();"})


@Scripts.Render("~/bundles/jqueryval") is also included in the view

Whats wrong here?

• javascript
• jquery
• asp-mvc-4

• What's the error? Do you see any error in console? Are you include jQuery in your page? – user1823761 Commented May 15, 2013 at 9:35
• Also you must write $('.test') instead of $('test'). Because you want to access elements with test class. – user1823761 Commented May 15, 2013 at 9:37
• @Mojtaba- I have updated my question. Actually I tried with $('.test'). I am not getting any error. Its not invoking the function! – Sandy Commented May 15, 2013 at 9:41
• Confirm that jQuery actually shows up in view source - if you have a folder physically named the same as your bundle path, bundling won't work. – ScottE Commented May 15, 2013 at 11:17
• Please read about jQuery selectors – Umar Farooq Khawaja Commented May 15, 2013 at 11:46

6 Answers 6

Your jQuery selector is wrong, use the id-selector instead:

$(document).ready(function () {
    $('#PropertyContent').change(function () {
        alert("1");            
    });
});

A few more possible errors:

• jQuery is not referenced in the page. To check this, open firebug, chrome dev tools or IE dev tools and check whether you have any errors
• A mon error is to include the $(document).ready inside the view, and only reference jQuery at the bottom. This will generate an error because at that point $ is not known. Possible solutions:
  1. Move the code to an external file and reference that file after the jQuery inclusion
  2. Move your jQuery declaration to the head-section (not remended as it will slow down the page load)

$(document).ready(function () {
    $('.test').change(function () {
        alert("1");            
    });
});

$('.test').change(function () { // on this part u need to add '.' in test

u forgot that it is a class.

You can also use following code.

$(document).ready(function () {
    $(".test").live("change",function () {
        alert("1");            
    });
});

Working FIDDLE Demo

$(function () {
    $('#PropertyContent').change(function () {
        alert("1");
    });
});

Add the following line somewhere in the view or the layout:

@Scripts.Render("~/bundles/jquery")

Also your selector is not correct. You have no HTML element with class="test".

Try $('#PropertyContent') instead.

Please try to get the dropDownList by its Id like the code below. I got a working example for you: http://jsfiddle/pzzQu/

$(document).ready(function () {
    $('#PropertyContent').change(function(){
        alert('1');
    });
});