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

【问题标题】：Checkbox doesn't change its check-state when clicking on it单击复选框时复选框不会更改其选中状态
【发布时间】：2012-12-22 20:42:11
【问题描述】：

我是 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 时呈现。

【问题讨论】：

从 CSS 来看，我猜你正在使用一个技巧来改变复选框的外观。也许实际的复选框被其他一些 CSS 代码隐藏了，而您看到的是 bg 图像。
是的，就是这样做的。但是让我感到困惑的是，有时它可以工作（当页面加载时呈现复选框时），但有时 - 它不会（当复选框以动态方式加载到某些 div 元素中时）。我在 Chrome“检查元素”的帮助下检查了这两种情况下的元素，发现在第一种情况下，鼠标单击和鼠标按下事件都有一些 jquery 处理程序。而在第二种情况下 - 只有鼠标点击事件的处理程序，而不是鼠标按下事件的处理程序。
必须有一些其他的 js 代码在页面加载时运行以初始化您的自定义复选框。
你是对的！确实有带有脚本的 .js 文件，它绑定了 mousedown 的处理程序并处理复选框的背景图像。我为解决问题所做的事情是使用 jquery .live() 方法绑定处理程序。据我了解，在这种情况下，处理程序绑定到稍后添加到页面的复选框。
伙计们，我是 stackoverflow 的新手……我应该怎么做才能将其标记为答案？ :)

标签： javascript css asp.net-mvc dom-events

【解决方案1】：

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

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

【讨论】：

我更新了一个问题，现在您可以看到我的意思是“按钮”而不是复选框的处理程序。

【解决方案2】：

在回调中添加 html 后，连接一个点击处理程序。

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

鉴于该问题可能是 CSS/样式问题。我认为某些元素漂浮在复选框上并阻止它被点击。您可以在 chrome 检查器中查看它，看看当您将鼠标悬停在复选框上时会悬停什么？

【讨论】：

谢谢，但是这个处理程序 - 不是一个复选框的处理程序，而是一个“按钮”的处理程序，它发布一个用我的复选框返回 html 的操作（这实际上不起作用）。我将更新描述以使其更清晰...
你不能用鼠标选中和取消选中或者它不触发什么？澄清 cb 应该做什么，而不仅仅是它不做什么
点击它时应该会改变它的选中状态。但它不这样做。它甚至在视觉上也没有改变。表现得像禁用，虽然它看起来不像......