mvc dropdown on change not firing jquery

Question

I have a drop down list:

@Html.DropDownList("CharacterID")

and the following jQuery:

$(document).ready(function(){
    $("#CharacterID").on(change, "#CharacterID", (function () {
        alert("I've Changed");
        //var id = $('#CharacterID').val();
    }));
});

which is not firing when I change one of the dropdown selections.

What can I do to fix this? I've looked at similar questions and answers and tried incorporating those but they haven't worked.

Here's what happens when I try running it in JSFiddle: http://jsfiddle.net/vgMdF/

Answer 1

Two problems:

1. The change is a string, not a magic variable. Add the quotations around it.
2. Also the on method needs to be called on any anscestor of the CharacterID. For most cases, its best to use $(document).on().

.

$(document).ready(function(){
    $(document).on("change", "#CharacterID", (function () {
        alert("I've Changed");
        //var id = $('#CharacterID').val();
    }));
});

You can see this working here: http://jsfiddle.net/h3q5d/

With your full page, and jquery loaded - it also works: http://jsfiddle.net/vgMdF/1/

Answer 2

You need to include jQuery in your demo and it should work as expected.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

For jsFiddle, you can choose jQuery version from Extensions & Frameworks tab.

Updated Fiddle

Answer 3

Could you try this:

$(document).ready(function(){
  $("#CharacterID").on('change',function () {
    alert("I've Changed");
    //var id = $('#CharacterID').val();
  });
});

Answer 4

The problem here is, your jsfiddle not ever include jquery, thats y it never run

check this fiddle http://jsfiddle.net/qg5Dh/1/

$(document).ready(function () {
    $(document).on("change", "#CharacterID", (function () {
        alert("I've Changed");
        //var id = $('#CharacterID').val();
    }));
});

it work well and the code work fine

Answer 5

Try this :

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