Question

作为我的一个网站的一部分的复活节彩蛋，我在我的页脚#left标记了一个“复活节”蛋，每次点击它都会改变，显示有趣的消息：

$('#left').append(" <span><a href='#' id='dontclick1'>Don't click.</a></span>");

// time for some fun
$('#dontclick1').click(function() {
$('#left span').html("<a href='#' id='dontclick2'>I told you not to click.</a>");
return false;
});

$('#dontclick2').click(function() {
$('#left span').html('<a href="#" id="dontclick3">Now you will suffer.</a>');
return false;
});

$('#dontclick3').click(function() {
$('#left span').html('<a href="#" id="dontclick4">Shame!</a>');
return false;
});

$('#dontclick4').click(function() {
$('#left span').html('<a href="#" id="dontclick5">You shouldn't click.</a>');
return false;
});

$('#dontclick5').click(function() {
$('#left span').html('<a href="#" id="dontclick6">But you did. Sigh.</a>');
return false;
});

在我的页脚中，附加动态会动态添加消息，因此没有JavaScript的人不会看到无法点击的内容。但是，第一次单击它时，它会更改为第二条消息，但在此之后它将无效。

我做错了什么？是因为里面有return false吗？没有它，它会跳转到页面顶部。我很困惑。

Answer 1

错误......这是一种非常可怕的方式来做你想做的事情，但是你会通过将所有.click替换为.live('click'来修复它 - 在你将事件附加到所有的时候元素，dontclick2，3等尚不存在。请阅读live了解更多信息，或在此网站上搜索，因为此问题经常出现。

修改：

我无法抗拒。虽然约翰的回答提供了一个体面的方式来做你想做的事情，但我并不是把Javascript和这样的标记混合起来的忠实粉丝。每当你想添加新的有趣消息时，你就必须搞乱Javascript数组，这样就不那么酷了。

最好的方式（至少在我看来是这样）会在你的页面中有这样的标记：

<ul id="easter_messages" style="display: none;"> <li>Don't click</li> <li>I told you not to click.</li> <li>Now you will suffer.</li> <li>Shame!</li> <li>You shouldn't click.</li> <li>But you did. Sigh.</li> </ul>

这将是您所拥有的语义正确的表示。您可以在其上使用这样的CSS：

#easter_messages ul, #easter_messages li { margin: 0; padding: 0; } #easter_messages li { cursor: pointer; list-style-type: none; display: inline; }

最后，使用这个jQuery代码：

$('#easter_messages').show().find('li').hide().click(function() { var $li = $(this).next('li'); if($li.length == 1) { $(this).hide(); $li.show(); } }).filter(':first').show();

这段代码基本上会显示列表，绑定一个点击处理程序，找到相对于被点击的列表元素的下一个列表元素，如果找到一个它隐藏自己并显示一个，然后在点击之外我们显示第一个一个开始的事情。

And this is an example of it in action

Answer 2

您可以像其他人提到的那样使用live()。对于替代方案，让我使用一组消息和一个click处理程序建议一个更优雅的解决方案。

$('#left').append(" <a href='#' id='dontclick'>Don't click.</a>");

// time for some fun
var messageNumber = 0;

$("#dontclick").click(function() {
    var messages = [
        "I told you not to click.",
        "Now you will suffer.",
        "Shame!",
        "You shouldn't click.",
        "But you did. Sigh."
    ];

    $(this).text(messages[messageNumber]);

    // Cycle to the next message unless we're already there.
    if (messageNumber < messages.length - 1) {
        messageNumber += 1;
    }

    return false;
});

我已更改它，因此您只需创建<a id='dontclick'>一次，而且不再需要数字。 click处理程序只注册一次，每次调用它时都会在#dontclick链接中显示不同的消息。顺便说一下，$(this)行中的$(this).text(...)是指$("#dontclick")。写$(this)只需要更短的时间。

Answer 3

因为您要将事件处理程序设置为尚不存在的元素。

尝试

.live("click", function() {
});

而不是.click（function（）{...

Answer 4

绑定点击事件后创建元素。您应该在创建元素后绑定。

$('#dontclick2').click(function() {
   $('#left span').html('<a href="#" id="dontclick3">Now you will suffer.</a>');
   $('#dontclick3').click(function() {
   $('#left span').html('<a href="#" id="dontclick4">Shame!</a>');
   return false;
   });

   return false;
});

Answer 5

我发表评论，但我还没有代表，所以我会在这里说。：）

.live（）是处理此类事情的一种很好的方式，但它需要jQuery 1.3。如果你陷入jQuery 1.2.6，答案为suggested by Daniel Moura是正确的方法。：）

第一次使用jQuery后不再替换它

5 个答案: