jQuery .click() 方法的行为不符合预期答案

【问题标题】：jQuery .click() method not behaving as expectedjQuery .click() 方法的行为不符合预期
【发布时间】：2011-02-09 14:40:56
【问题描述】：

我编写了一个函数，当单击某个元素时，它将用隐藏的 span 替换 div。当我在标签中的“onclick=”属性中有事件处理程序时，该函数运行良好。但后来我试图变得“花哨”，并用 jQuery 的 .click() 方法替换 onclick attr 。现在，当我尝试在页面上使用它时，除了 clunk 什么都没有——什么也没发生。

但是，如果我在 Chrome 的 js 控制台中执行 完全相同的代码，效果会很好。这是我的js：

$("a#delete").click(function () {
    $("a#delete").replaceWith($("span.hconf").attr("style", "none"))
});

这是相关的 html（在 div 里面，在外面）：

<a class='modify' id="delete" u="{{ i.id }}" href='#'>delete</a>
<span class='hconf' style="display:none;">Are you sure? <a class='confirm' id='del_conf_true' onclick='deltrue();' href='#'>yes</a> | <a class='confirm' id='del_conf_false' href='#'>no</a></span>

我知道我可以用“this”关键字更改第二个 $("a#delete")，但我现在不做这个，因为我不确定这是否是问题的一部分。我是 js/jQuery 的新手。

【问题讨论】：

“删除”是标识符还是 CSS 类？
“delete”是一个标识符。我也是 HTML 和 CSS 的新手，所以我确信我在这方面做错了。我只是关心js逻辑atm。

标签： javascript jquery

【解决方案1】：

Ready它：

$(document).ready(function() {
    $("a#delete").click(function () {
        $(this).replaceWith($("span.hconf").attr("style", "display:none"));
    });
});

...你不是说 style="display:none" 吗？您也可以轻松使用.hide()：

$("span.hconf").hide();

最后，在 ID 选择器上使用过滤标签是没有意义的。只需$("#delete")，它既短又快。

【讨论】：

也感谢您对 .hide() 的更新以及我的过滤器代码冗余。

【解决方案2】：

您的代码在在浏览器看到“删除”锚点 HTML 之前运行。因此，您的 jQuery 选择器“a#delete”什么也找不到，因此总体上什么也没有发生。通过将初始化代码放入“就绪”处理程序中：

$(function() {
  $('a#delete').click(function() { /* ... */ });
});

您将其执行推迟到整个文档已被解析的点。或者，您可以将脚本块放在 <body> 的末尾。

【讨论】：

【解决方案3】：

此 JS 在 DOM 准备好之前运行，请尝试将此代码放入 $(function(){})（DOM 准备就绪）块中。

$(function(){
  $("a#delete").click(function () {
    $("a#delete").replaceWith($("span.hconf").attr("style", "display:none"));
  });
});

或者，您可以尝试使用.live。

  $("a#delete").live('click', function () {
    $("a#delete").replaceWith($("span.hconf").attr("style", "display:none"));
  });

注意：使用.hide() 和.show() 更改显示属性。

【讨论】：