单击复选框时，复选框不会更改其选中状态

Question

I'm new in ASP.NET MVC and now I faced with a problem which occurs with checkbox if it appears on page later than page was originally loaded. See the next scenario: when I click let's say a button, Javascript handler calls controller post-action, and its result html is loaded into some concrete div. This html contains checkbox which doesn't react on mouse down event ( doesn't change its check-state ).

Checkbox works fine if it was rendered along with the whole page, but not if it was rendered later (as a result of post-action). See my markup here:

<a name="button" onclick="handler();"></a>

On the "button" click I want to get ActionResult from a controller and put it into a div:

<div id="resultWillBeLoadedIn">
    <!-- here is placeholder-->
</div>

The next html will be returned from /SomeController/SomeAction and loaded into div above:

<span class="check">
    <span class="checkbox">
        <input type="checkbox" name="form" value="2" />
    </span>
</span>

Here is a Javascript handler for my "button click":

function handler() {
    var url = '/SomeController/SomeAction';
    $.post(url, { params... }, function (result) {
        $('#resultWillBeLoadedIn').html(result);
}

See a part of CSS for it (I'm totally not an expert in CSS, so I'm not sure if that is that one I need to show here. And... (to be honest) I'm not an author of it, so please tell me if need more):

.check .checkbox{
float: left;
height: 12px;
width: 12px;
display: inline-block;
margin: 3px 5px 0 0;
cursor: pointer;
background: url(../img/checkbox.png) 0 0 no-repeat;
}
.check span.disable{
float: left;
height: 12px;
width: 12px;
margin: 3px 5px 0 0;
display: inline-block;
background: url(../img/checkbox.png) 0 -24px no-repeat;
}

Please tell me what I'm missing to make checkbox working not only if it was rendered right on page loading, but not when it was rendered as a result of post back into some div.

Answer 1

You've omitted the handler for the checkbox, but you probably need to use a delegated handler for it (docs for on ). Essentially, you delegate the handler to a higher level element in the DOM that does remain on the page (or maybe the body element, if no lower level element will work) and supply a selector filter that is used when the handler is invoked to see if it matches the event target. In this way you can have a handler that is applied once and works with dynamic elements that are added later.

$('body').on('click', 'input[type="checkbox"]', function() {
      // handler function
});

Answer 2

After you add the html in the callback, then hook up a click handler.

$('selectCheckbox').on('click', handler);

Given the problem its likely a CSS/Styling issue. I think some element is floating over the checkbox and preventing it from being clicked on. Can you look at it in chrome inspector and see what is getting hovered when you put your mouse over the checkbox?