新しいウィンドウ オブジェクトの作成とリンク クリックの間で競合状態が発生しています。新しいウィンドウは AjaxUpload と呼ばれるプラグインで、その入力には一意の ID を持つリンク要素が必要です。AjaxUpload は、ファイル選択の新しいウィンドウを表示することに注意してください。
このページには、一意の ID を持つファイル選択ウィンドウを表示する多くのリンクが必要です。したがって、シナリオを単純化するために、クリックされたリンクに新しい ID をアタッチし、ウィンドウ オブジェクトを作成し、マウス クリックをシミュレートしてウィンドウを表示し、ID を破棄し、他のリンクで同じことを行うことを計画します。
ただし、ウィンドウ オブジェクトの読み込みが完了する前にシミュレートされたクリックが実行された場合に問題が発生し、リンクが 2 回クリックされた場合にのみコードが機能します。
コードは次のとおりです。
$(document).ready(function() {
// The link is an anchor element with icon camera class
// that will be attached with a new ID called wall-image-upload
// which will destroyed after the window is brought up
$( "a.icon.camera" ).click(function(e) {
// Exit the function when wall-image-upload
// id is created to avoid infinite loop
if ($('#wall-image-upload').length!==0) {
return;
}
// Create the ID
e.target.setAttribute("id", "wall-image-upload");
// Create AjaxUpload object to handle the
// image attachment where it looks up link
// with wall-image-upload ID
var uploader = new window.AjaxUpload(
'wall-image-upload',
{ action: 'wall_upload/{{$nickname}}',
name: 'userfile',
onSubmit: function(file,ext) { $('#profile-rotator').show(); },
onComplete: function(file,response) {
addeditortext(response);
$('#profile-rotator').hide();
}
}
);
// Simulate click on the element, this doesn't effect on
// anything unfortunately
$('#wall-image-upload').trigger("click");
// Destroy the id
$('#wall-image-upload').prop("id",null);
});
});
どこに、どのように置くべきか
$('#wall-image-upload').trigger("click");
適切に実行するには?