javascript - 复选框在单击时不会更改其选中状态

Question

我是 ASP.NET MVC 的新手，现在我遇到了一个问题，如果复选框出现在页面上的时间晚于页面最初加载的时间，就会出现该问题。 请看下一个场景:当我点击一个按钮时，Javascript 处理程序调用 Controller 后操作，并将其结果 html 加载到某个具体的 div 中。 此 html 包含不会对鼠标按下事件使用react的复选框(不会更改其检查状态)。

如果它与整个页面一起呈现，则复选框可以正常工作，但如果稍后呈现(作为后期操作的结果)，则效果不佳。 在这里查看我的标记:

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

在“按钮”上单击我想从 Controller 获取 ActionResult 并将其放入 div 中:

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

下一个 html 将从/SomeController/SomeAction 返回并加载到上面的 div 中:

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

这是我的“按钮点击”的 Javascript 处理程序:

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

查看 CSS 的一部分(我完全不是 CSS 专家，所以我不确定是否需要在这里展示它。而且...(说实话)我是不是它的作者，所以如果需要更多请告诉我):

.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;
}

请告诉我我缺少什么才能使复选框正常工作，不仅是在页面加载时正确呈现，而且由于回发到某个 div 而呈现时也没有。

Answer 1

您省略了复选框的处理程序，但您可能需要为其使用委托(delegate)处理程序(on 的文档)。本质上，您将处理程序委托(delegate)给保留在页面上的 DOM 中的较高级别元素(或者可能是 body 元素，如果没有较低级别的元素将起作用)并提供一个选择器过滤器，当调用处理程序以查看如果它匹配事件目标。通过这种方式，您可以拥有一个只应用一次并与稍后添加的动态元素一起使用的处理程序。

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