jQueryは最初の後ももう置換されません

Question

私のサイトの一部のイースターエッグとして、私はフッター#leftタグに「イースター」の卵をクリックするたびに変わり、面白いメッセージが表示されます：JavaScriptのない人はunclickable何かを見ることはありませんので、私のフッターに

$('#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は、動的にメッセージを追加します。ただし、初めてクリックすると2番目のメッセージに変わりますが、それ以降は機能しません。

私は間違っていますか？そこにはreturn falseがあるのですか？それがなければ、ページの先頭にジャンプします。よくわかりません。

Answer 1

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ハンドラは1度だけ登録され、呼び出されるたびに#dontclickリンクに別のメッセージが表示されます。ちなみに、の$(this)は、$("#dontclick")を示しています。 $(this)と書くのに少しだけ短くなっています。

Answer 2

のErr ...それはあなたが望むものをやってするのはかなり恐ろしい方法ですが、あなたは.live('click'ですべて.clickを置き換えることによって、それを修正します - あなたはすべての要素、dontclick2にイベントを追加する時には、3などまだ存在しない。 liveを読んだり、このサイトの周りを検索したりすると、この問題が頻繁に発生します。

EDIT：

私は抵抗することができませんでした。ジョンの答えはあなたが望むことをするためのまともな方法を提供していますが、私はこのようなマークアップと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 3

イベントハザードをまだ存在しない要素に設定しているためです。

代わり

Answer 4

要素は、クリックイベントをバインドした後に作成されている...（関数（）{.click。要素を作成した後にあなたがバインドする

.live("click", 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; 
}); 

Answer 5

私はコメントを残したいと思いますが、まだ担当者がいないので、ここでそれを言います：

.live（）はこのようなことを処理するための素晴らしい方法ですが、jQuery 1.3が必要です。 jQuery 1.2.6で動かない場合は、suggested by Daniel Mouraという答えが適切な方法です。:)