Question

我是ASP.NET MVC的新手，现在我遇到了一个问题，如果它出现在页面最后加载的页面上，则会出现复选框。看下一个场景：当我点击让我们说一个按钮时，javascript处理程序调用控制器后期操作，并将其结果html加载到一些具体的div中。此html包含对鼠标按下事件没有反应的复选框（不会更改其检查状态）。如果复选框与整个页面一起呈现，则复选框可以正常工作，但如果它稍后呈现（由于后期操作）则不行。在这里查看我的标记：

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

在“按钮”上单击我想从控制器获取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

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

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

Answer 2

在回调中添加html后，再挂钩一个点击处理程序。

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

鉴于此问题可能是CSS /样式问题。我认为一些元素浮动在复选框上并阻止它被点击。您可以在Chrome检查器中查看它，看看当您将鼠标放在复选框上时会发生什么变化？

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

2 个答案: