jQueryのpostで生成した要素を無限に有効に

質問

以下のような、jQueryのソースで、jQueryで生成したリンクを押すことによって$.postで生成したリンクで、.onを使って何回でもアラートが表示されるようにしたいのですが、1回目だけ出るのですが、それ以降は出ません。
何回でも出るようにするためには、どのようにすればいいですか。
また、postするデータmessage: 'message'も何回リンクをクリックしても、送信されるようにしたいです。よろしくお願いします。

$(function(){
$('#html').html("<a href='' onclick='return false' class='hello'>Hello</a>");
$('.hello').on("click", function(){
$.post("", {
message: 'message',
}, function(){
$('#html').html("<a href='' onclick='return false' class='hello'>Hello</a>");
alert('hello');
});
});
});

回答No.1

tracer · ベストアンサー

1度しかできない理由は、onの箇所はページが読み込まれた時に実行されるためです。
つまり、最初に生成したa.helloに関してはonが定義されていますが、2度目以降に生成したa.helloにはonが定義されていません。
以下のようにjQueryのlive機能を使って、永続的にa.helloに対してonを定義することができますが、

$(document).on("click",".hello",function(){
　alert('hello");
});

それ以前に、毎回a.helloを生成するという箇所に問題があると思います。
全体的な目的が分からないのでなんとも言えませんが、a.helloを一度だけ生成する仕組みにした方が明らかにスマートですし、そうすることで、今回の問題は解決されます。

お礼

教えていただいたやり方でうまくいきました。
なんとなくわかったような気がします。
live機能調べてみたいと思います。
目的としては、リンクが押されるたびに、postを送信し、DBの行を削除して、もう一度全行を取得し、そのデータからHTMLを再生成というのをやりたくて、毎回、リンクが押されるたびにpostを実行したかったというものです。
大変詳しくありがとうございました。