jqueryで出力した際に

質問

ファイルのアップロード削除で、jqueryとphpを使っています。

・index.php
メインのphpです。
ここで外部jsを読み込んだりその他の処理をしています。

・upload.phpの最終処理
echo '<a href="#" class="unlink">削除する</a>';

・外部jsの処理
$(function(){

// ファイルのアップロード
$('input:file').change(function(){
$(this).upload('upload.php',function(res){
$(this).parent().next('.thumb').text('').append(res);
},'html');
});

// ファイルの削除
$('.unlink').click(function(){
alert('unlink');
return false;
});

});

index.phpに「echo '<a href="#" class="unlink">削除する</a>';」と書いて出力すると、jsが動作してアラートが表示されますが、upload.phpで出力するとアラートがでません。

原因がわからないのですが、メインファイルに書けば動作するのでjsを噛ませていることが原因かと思っています。

出力されたHTMLを見てもclass属性が出ていますし、jsの読み込みを絶対パスにしても駄目でした。外部CSSは効いているようですし謎です・・・

どうしたらいいのでしょうか？

回答No.1

ok-rjak

これだけのコードだと正しいかどうかわかりませんが、ようは画像をアップロードしたときに動的に「削除する」というリンク文字もJavascriptで吐き出しているということでしょうか。
それであればclickイベントでは動作させる事ができません。
Javascript、jQuery、DOMに関して詳しく調べていただいた方がいいと思いますが、単純に動作させるだけであれば以下のスクリプトで動きます。

$(document).on('click', '.unlink', function(){
alert('unlink');
return false;
});

そもそもJavascriptやjQueryのclickイベントなどはDOMが構築された時点（ページが読み込まれた直後）に存在しているDOMしか操作する事ができません。
ページが読み込まれた後に動的に追加された要素は、onメソッドを使って操作する必要があります。