Hello dear forum users. I have a little problem. Through Ajax, I upload several photos of <img src='' class='imgList'> on the page in <div='peview'></div> <img src='' class='imgList'> . Initially, the download comes from the php page, i.e. using json check if I even have them and, if there is, I upload the preview above. Now, using JQuery I create a photo deletion handler. Because they have the same class, as far as I know, I cannot do without iteration, I use each . Now in general:

 $('.imgList').each(function() { $(this).on('click', function() { var deleteFile = confirm("Удалить эту фотографию?"); if(deleteFile == true) { //Тут обработка... } }); });

Then, on the same page there is a corresponding form of loading images. Who is familiar with jquery.wallform.js ? Here I use this library. Its meaning is that it uploads the image to the server, showing a thumbnail of the photo. So this same thumbnail is loaded into the same <div='peview'></div> . It turns out that when the page loads, 5 photos are loaded and, with the help of the form, another one is loaded. The problem is that the iteration with each has already been reproduced when the page is loaded, which is understandable, so it doesn’t see a click by clicking on the photo loaded in <div='peview'></div> via wallform Ajax. Here is this piece of code ...

 $('#photoimg').die('click').live('change', function() { $("#imageform").ajaxForm({target: '#preview', beforeSubmit:function(){ $("#imageloadstatus").show(); $("#imageloadbutton").hide(); }, success:function(){ // Тут у нас всё шикарно, фото загрузилось $("#imageloadstatus").hide(); $("#imageloadbutton").show(); }, error:function(){ $("#imageloadstatus").hide(); $("#imageloadbutton").show(); } }).submit(); });

.... also provided by wallform . I tried to wrap the function with each in an anonymous function and made a call to this function in success:function() {...} But it turns out that the handler hangs up again and again and the result is a mess that the PPC ... In general, the task is That would listen to id #preview constantly. The result is in brief: The page has loaded, the photo has been loaded, the photo has been loaded through the form, brought on the photo, deleted the photo. I apologize for the wordiness, but I think it is better to explain inside and out for a better understanding. Thanks for the earlier and for understanding :)

    2 answers 2

    You can use the jQuery feature to listen for click events not on a specific .imgList , but on the #preview parent.

    Check out the .on documentation () .

    As a result, the handler code might look like this.

     $('#preview').on('click', '.imgList', function() { var deleteFile = confirm("Удалить эту фотографию?"); if(deleteFile == true) { //Тут обработка... } });

    Example of use:

     $('#preview').on('click', '.imgList', function() { var deleteFile = confirm("Удалить эту фотографию?"); if (deleteFile == true) { //Тут обработка... } }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="preview"> <div class="imgList">imgList 1</div> <div class="imgList">imgList 2</div> <div class="imgList">imgList 3</div> </div>

    • @ sergei1094 In this case, let's html code in the studio! - Stepan Kasyanenko
    • I apologize, I commented out my code and did not put a closing tag at the end of the comment. Your method works) Thank you - sergei1094
    • @ sergei1094 nothing terrible - it happens. - Stepan Kasyanenko

    I avoided such a problem using the .off() method

    For example: $("#element").off().on("click", function(){});

    If this code is crammed into a loop, then the handler will always be the only one.

    !!! It is extremely important .off() without parameters clears all event handlers !!!