为什么不 .attr('checked','checked') 设置？答案

【问题标题】：Why won't .attr('checked','checked') set?为什么不 .attr('checked','checked') 设置？
【发布时间】：2011-02-05 12:19:23
【问题描述】：

我有以下 sn-p 代码（我使用的是 jQuery 1.4.2）：

$.post('/Ads/GetAdStatsRow/', { 'ad_id': id }, function(result) {
    $('#edit_ads_form tbody').prepend(result);
    $(result).find('td.select-ad input').attr('checked','checked').click();
});

假设帖子正常运行并返回正确的预构建<tr> 和一些<td>s。奇怪的是：$(result).find() 行找到正确的输入（这是一个复选框，因为它是单元格中的唯一输入）并正确运行链接的 click() 函数，但它拒绝将框设置为选中，我需要发生。

这也是一个疯狂的转折……当我变得超级具体并将$(result).find() 行更改为此（复选框的ID）时：

$('#ad_' + id).click();

它会选中该框，但不运行click() 函数！如果我将其设置为

$('#ad_' + id).attr('checked','checked').click();

它运行点击功能，就好像该框已选中，但该框仍未选中，如果我这样做了

$('#ad_' + id).click().attr('checked','checked');

它什么都不做。

这到底是怎么回事？我的头发快没了……

谢谢！

编辑

这是我在$(function()) 调用中设置点击事件的方法：

$('td.select-ad input').live('click',AdPreview.selectAd);

它对所有其他复选框都一样，如果手动单击，新添加的复选框确实可以工作。

编辑 2

经过一番挖掘，我发现：

$('#ad_' + id).click();

实际上确实除了选中该框外还调用了我的点击功能。但是，当调用 click 函数时（我已经检查以确保 input 是正确的复选框并且它是正确的），

var input = $(this);
console.log(input.is(':checked'));

日志返回 false，即使该框已被实际选中！呸呸呸

【问题讨论】：

您能告诉我们您如何定义您的点击处理程序以及它的作用吗？你如何测试“正在运行的点击功能”——你说的是点击事件的触发，对吧？

标签： jquery checkbox click

【解决方案1】：

我认为这是因为您正在查找一些不在 DOM 中的 html。

$.post('/Ads/GetAdStatsRow/', { 'ad_id': id }, function(result) {
    // the "result" html is copied into the DOM
    $('#edit_ads_form tbody').prepend(result);

    // now you're doing a find on some HTML which isn't in the DOM.
    $(result).find('td.select-ad input').attr('checked','checked').click();
});

这在一定程度上解释了为什么做特定的事情会奏效。以下是个别问题：

$('#ad_' + id).click();

这将单击该框（使其被选中），但没有附加任何事件。

$('#ad_' + id).attr('checked','checked').click();

这会将属性设置为选中，然后单击它，立即取消选中它。

【讨论】：

这是有道理的......但是我在文档的前面用live('click') 设置了复选框单击事件。它不应该运行吗？
我认为$(result)..click() 没有做任何事情的一个原因是live 处理程序会侦听冒泡到DOM 文档的事件，但$(result) 包含与DOM 分离的节点。

【解决方案2】：

http://www.electrictoolbox.com/check-uncheck-checkbox-jquery/

jQuery（或浏览器的 DOM？我忘了）期望“checked”属性的值为真或假，尽管在 HTML-source-land 中它是“checked='checked'”。

HTH。

【讨论】：

我在整个代码中可能在 100 个位置使用了.attr('checked','checked')，它按预期工作......
我相信浏览器实际上只是寻找属性的存在，根本不关心它的值。

【解决方案3】：

我怀疑这里发生的事情是 Click 实际上是取消勾选复选框。那是因为 Find 方法，正如你所说，返回复选框。

尝试移除点击调用。

这里有一些示例代码

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>

    <body>

        <script type="text/javascript">
            function clicked() {
                console.log('clicked');
            }

            $(document).ready(function() {

                var result = '<tr><td><input type="checkbox" id="chkbx" onclick="clicked()" /></td></tr>';

                $('#edit_ads_form tbody').prepend(result);

                $('#edit_ads_form tbody').find("input").click();
            });
        </script>

        <table id="edit_ads_form">
        <tbody>

        </tbody>
        </table>
    </body>
</html>

【讨论】：

我添加了一些代码，显示复选框被选中并触发点击事件。

【解决方案4】：

我想通了，感谢所有让我走上正轨的人。这是我必须做的：

首先，我没有将复选框连接到在click() 上运行，而是将它们更新为在change() 上运行。完成此操作后，我使用以下行代替另一行：

$('#ad_' + id).click().change();

现在一切正常！复选框保持选中状态并调用正确的函数。

再次感谢大家！

【讨论】：

good catch.. 在复选框值更新之前调用单击处理程序，并在值更新后调用更改处理程序，但以编程方式触发单击时不会调用更改处理程序。跨度>

【解决方案5】：

$(result).find('td.select-ad input').attr('checked','checked').click(); 不是要选中它（.attr('checked','checked')）然后单击（.click()）取消选中它吗？

如果我遗漏了什么，请原谅我，但我很确定就是这样。这就是为什么 $('#ad_' + id).click(); 有效，但您的其他示例无效。

【讨论】：

我也是这么想的……但是为什么不打勾呢？
当您拨打click() 时，它会取消选中该框。它打勾，然后取消打勾。如果您改为使用$(result).find('td.select-ad input').click(); 会怎样（删除.attr('checked','checked') 部分）。
当我这样做时，什么都没有发生。
您的点击处理程序中有什么？可能有诸如 preventDefault 之类的东西，或者返回 false 会阻止它被检查。
没有preventDefault或者return false