ワンクリック アップロード (ocupload.js) を使用して、サーバーの一時フォルダーにカスタム メール フォームを含む添付ファイルをアップロードしています。
アップロードするたびに、ファイル名を含む小さなラベルがドロップゾーンに追加されます。各ラベルには小さな削除ボタンがあります。削除ボタンを押すと、一時フォルダーから添付ファイルが削除され、ラベルが削除されます。
基本的なアタッチメント UI のもの。
ここに問題があります。削除ボタンをクリックすると、添付ファイルが一時フォルダーから削除され、対応するラベルがドロップゾーンから削除されるため、Ajax 呼び出しは正常に機能します。しかし、この後、試行するすべての ajax 呼び出しが失敗します。添付ファイルを削除するだけでなく、新しい添付ファイルをアップロードします。ただまったく反応がありません。
アップロード スクリプト:
$("#attachment").livequery(function(){
$(this).upload({
name: 'xfile',
action: '/ajax/upload',
params: {action:'attachment',folder:'/tmp/mails/new'},
onSelect: function(){
console.log('file selected');
},
onSubmit: function() {
console.log('file submitted');
},
onComplete: function(response){
response = jQuery.parseJSON(response);
var $attachment = $('#attachment_dropzone .attachment.template').clone();
//fill template
$attachment.find('.name').html(response.filename);
$attachment.attr('data-filename',response.filename);
$attachment.attr('data-path',response.path);
//add label
$attachment.removeClass('template');
$attachment.removeAttr('style');
$('#attachment_dropzone').append($attachment.clone());
}
})
});
および削除ハンドラ
$('#attachment_dropzone .attachment .remove').livequery(function(){
$attachment = $(this).parent().parent();
$(this).on('click',function(){
console.log('start remove');
$.post('/ajax/action', { action: 'remove_attachment', filename: $attachment.data('filename'), path: $attachment.data('path') }, function(data){
console.log('remove callback');
if (data == 'success'){
console.log('remove success');
$attachment.remove();
}else{
alert(data);
}
})
})
});
ご覧のとおり、livequery.js を使用して、スクリプトが動的に追加されたコンテナーでも機能することを確認しています。
添付ファイルはいくつでもアップロードできます。問題はありません。1 つ削除すると、ajax の話はすべて終わります。