Hello! Need help from jquery experts! I am trying to implement this idea for the site:

five divs (type input file type)

<div id="images_block"> <div class="file_block" id="uploads_1"><i class="fa fa-picture-o fa-4x"></i></div> <div class="file_block" id="uploads_2"><i class="fa fa-picture-o fa-4x"></i></div> <div class="file_block" id="uploads_3"><i class="fa fa-picture-o fa-4x"></i></div> <div class="file_block" id="uploads_4"><i class="fa fa-picture-o fa-4x"></i></div> <div class="file_block" id="uploads_5"><i class="fa fa-picture-o fa-4x"></i></div> </div>

take this form alt text

when you click on one of the id ^ = uploads_ blocks, the ajax load function is called (or rather preloads, load and write to the database should then occur by pressing the save button) and upon successful validation, the div should appear instead of the preview

and so that's what i have

 <script type="text/javascript"> var button = $('div[id^=uploads_]'); // кнопка выбираем дивы с атрибутом id который начинается uploads_ var path = '<?=DK_ROOT?>/photo/advert/'; // директория загрузки var id = $('#adv_id').text(); // id поста new AjaxUpload(button, { action: 'ajax/upload.php', name: 'userfile', data: {id: id}, onSubmit: function(file, ext){ if(!(ext && /^(jpg|png|jpeg|gif)$/i.test(ext))){ alert("Разрешено загружить только изображения!"); return false; } button.text("Загрузка"); this.disable(); }, onComplete: function(file, response){ this.enable(); var res = $.parseJSON(response); if(res.answer == "OK"){ $(this).html("<img src='" + path + res.file + "' />"); }else{ alert(res.answer); } } }); </script>

so in this situation, only the first div works as it should and the rest do not react, I tried to do it at the very beginning through the ON event handler and hang up on it

 $('div[id^=uploads_]').on('click', function(){ тут остальной код приведенные выше... });

it turns out as if, but only at the first click the button is formed var button = $ ('div [id ^ = uploads_]'); and then you need to take the mouse away from this diva and click again, moreover, it’s a complete mess (((

Help guys, maybe someone has already performed this task, or maybe another plug-in is needed for this

Thank you in advance for any assistance provided !!!

I found an example! same way i need

    1 answer 1

    In your code, I see, as an option, to give different ID elements.

    In general, PrettyPhoto does an excellent job with this.

    • so they are different id = "uploads_1", id = "uploads_2", etc. how to make each of them hit new AjaxUpload (button where button and id is the div div that was clicked on - Kdes70