jQuery .change event not firing for ASP MVC CheckBoxFor

Question

Below is the jQuery code I'm trying to use to make a hidden text box visible. However when clicked the text box stays hidden, and none of the alerts will fire.

For this check box I have tried .click, .change, and .mousedown however none has worked.

Here is the jQuery

$('#OverrideRegionInd').click(function () {
    alert("here");
    alert($(this).is(':checked'));
    if ($(this).is(':checked')) {
        $('#territoryName').html("");
        $('#Region').val("");
        $('#Region').show();
    } else {

    }
});

And here is the code from the view. This is an ASP MVC 3 site

    <div class="M-editor-label">
        Override Territory Manually?
    </div>
    <div class="M-editor-field" style="padding-right:190px;padding-top:5px;">
        @Html.CheckBoxFor(Model => Model.OverrideRegionInd)
    </div>

EDIT

Here is the entire <div> after it is rendered

    <div class="M-editor-field" style="padding-right:190px;padding-top:5px;">
        <input data-val="true" data-val-required="The Override Territory? field is required." id="OverrideRegionInd" name="OverrideRegionInd" type="checkbox" value="true" /><input name="OverrideRegionInd" type="hidden" value="false" />
    </div>

Make sure your JQuery is loaded after the HTML is rendered. Wrap it in a $(document).ready(function () { //your javascript code }); — Dan-Nolan
– Dan-Nolan, Commented Apr 30, 2013 at 21:51

Mathew Thompson · Accepted Answer · 2013-04-30 21:53:19Z

1

The code you posted (and the resulting HTML) works exactly as is (see Fiddle HERE)

The only difference, is JSFiddle wraps that jQuery into a document.ready call, try that:

$(function () {
    $('#OverrideRegionInd').click(function () {
       //click function code
    });
});

answered Apr 30, 2013 at 21:53

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NealR Over a year ago

Putting this code inside the document.ready made it work. Any idea why it won't work outside of it? (I just started learning jQuery on the job about a week ago)

Mathew Thompson Over a year ago

@NealR Because there's no guarantee that the DOM has fully loaded when this code executes (in your case it hadn't), so you should always use document.ready (similar to window.onload in pure JavaScript).

Collectives™ on Stack Overflow

jQuery .change event not firing for ASP MVC CheckBoxFor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related