Question

我编写了一个函数，在单击某个元素时，会替换一个隐藏跨度的div。当我在标签中的“onclick =”attr中有事件处理程序时，该函数运行正常。但后来我试图“花哨”并用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的新手。

Answer 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")，它就会更短更快。

Answer 2

您的代码正在运行之前浏览器会看到“删除”锚点HTML。因此你的jQuery选择器“a #delete”什么都没找到，所以整体上没有任何反应。将初始化代码放在“就绪”处理程序中：

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

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

的末尾

Answer 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()更改显示属性。

jQuery .click（）方法的行为不符合预期

3 个答案: