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

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;
});

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

我究竟做错了什么？是因为return false里面有吗？没有它,它会跳转到页面顶部.我糊涂了.

Answer 1

嗯...这就是做你想要的东西的一个相当可怕的方式,但你会更换所有的修复.click与.live('click'-在你的时间追加事件的所有元素,dontclick2,3,等还不存在.阅读上活比较多,或围绕该网站上搜索,因为这问题经常出现.

编辑:

我无法抗拒.虽然约翰的回答提供了一个体面的方式来做你想做的事情,但我并不是把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();

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

这是它的一个例子.

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).