代码之家 › 专栏 › 技术社区 › Brandon Wang

jQuery在第一次之后将不再替换

scripting html jquery javascript

Brandon Wang · 技术社区 · 15 年前

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

$('#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 在里面?没有它,它会跳到页面顶部。我很困惑。

5 回复 | 直到 5 年前

Paolo Bergantino 15 年前

犯错误这是一种非常可怕的方法,但你可以通过替换所有 .click 具有 .live('click' -在将事件附加到所有元素时, dontclick2 , 3 live 更多信息,或者在这个网站上搜索,因为这个问题经常出现。

我无法抗拒。虽然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>

这将是对您所拥有内容的语义正确表示。您可以在其上使用如下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

John Kugelman Michael Hodel 15 年前

你可以用 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'> 点击 处理程序只注册一次,每次调用它时,它都会在 #dontclick $(this) 在 $(this).text(...) $("#dontclick") $(本) .

ppiotrowicz 15 年前

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

而是。单击(函数(){。。。

Community basarat 7 年前

suggested by Daniel Moura 这是正确的方法。:)

ankitkanojia TStamper 5 年前

元素是在绑定单击事件之后创建的。您应该在创建元素后进行绑定。

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