Javascript jQuery赢得'；第一次之后，我不会再更换了

作为我的一个网站的一部分的复活节彩蛋，我在我的页脚左侧标记了一个“复活节”彩蛋，每次你点击它时，它都会发生变化，显示有趣的消息：

$('#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;
});

$（'#左'）。追加（“”）；
//是时候找点乐子了
$（'#dontclick1'）。单击（函数（）{
$（'#左span'）.html（“”）；
返回false；
});
$（'#dontclick2'）。单击（函数（）{
$（'#左span'）.html（''）；
返回false；
});
$（'#dontclick3'）。单击（函数（）{
$（'#左span'）.html（''）；
返回false；
});
$（'#dontclick4'）。单击（函数（）{
$（'#左span'）.html（''）；
返回false；
});

在我的页脚中，append动态添加消息，这样没有JavaScript的人就不会看到不可读的内容。但是，第一次单击它时，它会更改为第二条消息，但此后它将不起作用

---

我做错了什么？是因为里面的

返回false

吗？没有它，它会跳到页面顶部。我很困惑。

呃。。。这是一种非常可怕的方法，但您可以通过将所有

替换为
.live来修复它（“单击”
-在您将事件附加到所有元素时，
dontclick2
、
3
等尚不存在。请继续阅读了解更多信息，或在本网站搜索，因为此问题经常出现

编辑：

我忍不住。虽然John的回答提供了一种很好的方式来做你想做的事情，但我不太喜欢将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>

最后，使用以下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();

这段代码本质上是显示列表，绑定一个click处理程序，该处理程序查找与被单击的列表元素相关的下一个列表元素，如果找到了一个，它将隐藏自己并显示该列表元素，然后在单击之外显示第一个列表元素以开始工作

.
因为您正在将事件hadler设置为尚不存在的元素

试一试

而是。单击（function（）{…
在绑定单击事件之后创建元素。您应该在创建元素之后进行绑定

$('#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;
});

$（'dontclick2'）。单击（函数（）{
$（'#左span'）.html（''）；
$（'#dontclick3'）。单击（函数（）{
$（'#左span'）.html（''）；
返回false；
});
返回false；
});
我会留下评论，但我还没有代表，所以我会在这里说出来。：）

.live（）是处理这类事情的一种很好的方法，但它需要jQuery 1.3。如果您陷入jQuery 1.2.6的困境，那么答案就是正确的方法。：）
您可以使用
live（）
正如其他人所提到的。作为替代方案，我建议使用一组消息和一个
单击
处理程序来提供一个更优雅的解决方案

$('#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;
});

$（'#左'）。追加（“”）；
//是时候找点乐子了
var messageNumber=0；
$（“#不单击”）。单击（函数（）{
变量消息=[
“我告诉过你不要点击。”，
“现在你要受苦了。”，
“可耻！”，
“你不应该点击。”，
“但是你做到了，唉。”
];
$（this）.text（messages[messageNumber]）；
//循环到下一条消息，除非我们已经在那里。
if（messageNumber

我更改了它，因此您只需创建一次
，它不再需要数字。
单击处理程序只注册一次，每次调用它时，它都会在
#dontclick
链接中显示不同的消息。
$（此）
中的
$（此）
。顺便说一下，文本（…）
行指的是
$（“#dontclick”）
。写
$（这个）
，
保罗在2分钟前已经提供了这个解决方案。礼貌地向他投票，而不是提供重复的解决方案。在我发布我的答案之前，没有看到他的答案。但我已经向他投票：）。如果答案重复，你可以删除你的答案（保持网站精简、平庸，充满独特的解决方案）。谢谢你也投票给他。jQuery为类似的事情引入了.live（）方法。嵌套多个creates/handler是一种效率低下的方法。也就是说，直到最近，它才是实现这一目标的方法——所以不要感到难过；）在jQuery 1.3中添加：将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。还可以绑定自定义事件。“如果您使用的是1.2.6或更早版本，请参阅Ariel Flesler的jQuery Listen插件，它的操作非常类似。Live是一种方式。我使用过几次，它只是一个很好的功能。+1更好，只要链接文本都是预加载的，等等。但是，当我将其放入时，它不起作用。我尝试将“this.text”替换为“this.html”但它仍然不起作用。这是我做错了什么吗？向上投票只是为了让你离评论更近一步；）
$('#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;
});

$('#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;
});